jquery + bootstrap 2.3.2 popover 不适用于 $(this).next答案

【问题标题】：jquery + bootstrap 2.3.2 popover not working with $(this).nextjquery + bootstrap 2.3.2 popover 不适用于 $(this).next
【发布时间】：2014-02-02 12:12:49
【问题描述】：

我有一个带有复选框的表格。当复选框被选中时，应该有一个带有表单的 twitter 引导弹出窗口。此表单取决于其复选框。因此，我将呈现隐藏的表单并在 twitter 弹出窗口中显示它们。

但是当我尝试使用 $(this).next(".my_class").html(); 访问弹出框内容时它不工作。当我使用 return $("#my_id").html(); 呈现固定内容时；

这是一个示例（此处为 jsfiddle）：

我的 html 表格

<h4 class="hide">fixed form</h4>

<div id="popover-head" class="popover-head hide">fixed form</div>
<div id="popover-content" class="popover-content hide">
    <form>
        <!-- my form -->
    </form>
</div>

<h4>table one working popover</h4>

<table class="table table-striped">
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input title="" class="checkbox_cancel" id="checkbox1" type="checkbox">
            </td>
        </tr>
        <tr>
            <td>
                <input title="" class="checkbox_cancel" id="checkbox1" type="checkbox">
            </td>
        </tr>
    </tbody>
</table>

<h4>table two not working popover</h4>

<table class="table table-striped">
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input title="" class="checkbox_cancel2" id="checkbox1" type="checkbox">
            </td>
            <div id="popover-head" class="popover-head hide">dynamic form 1</div>
            <div id="popover-content" class="popover-content hide">
                <form>
                    <!-- my form -->
                </form>
            </div>
        </tr>
        <tr>
            <td>
                <input title="" class="checkbox_cancel2" id="checkbox1" type="checkbox">
            </td>
            <div id="popover-head" class="popover-head hide">dynamic form 2</div>
            <div id="popover-content" class="popover-content hide">
                <form>
                    <!-- my form -->
                </form>
            </div>
        </tr>
    </tbody>
</table>

我的javascript：

//working
$('.checkbox_cancel').popover({ 
    html : true,
    title: function() {
      return $("#popover-head").html();
    },
    content: function() {
      return $("#popover-content").html();
    }
 });

//not working
$('.checkbox_cancel2').popover({ 
    html : true,
    title: function() {
      return $(this).next(".popover-head").html();
    },
    content: function() {
      return $(this).next(".popover-content").html();
    }
});

我怎样才能让它与动态选择一起使用？

【问题讨论】：

标签： javascript jquery twitter-bootstrap popover

【解决方案1】：

看起来您的代码应该可以工作，但您的 html 不正确（下一个是下一个元素）以下应该可以工作：

 <tr>
        <td>
            <input title="" class="checkbox_cancel2" id="checkbox1" type="checkbox">
            <div id="popover-head" class="popover-head hide">dynamic form 1</div>
            <div id="popover-content" class="popover-content hide">
              <form>
                <!-- my form -->
              </form>
            </div>
        </td>

【讨论】：