Question

我有一张带复选框的表格。选中该复选框后，应该有一个带有表单的twitter bootstrap popover。此表单取决于其复选框。因此，我将呈现隐藏的形式，并在twitter popover中显示它们。

但是当我尝试用$（this）.next（“。my_class”）。html（）;来访问popover内容时。它不起作用。当我使用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();
    }
});

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

Answer 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>

jquery + bootstrap 2.3.2 popover无法使用$（this）.next

1 个答案: