Question

我是jQuery的新手。我正在通过ajax加载表。在桌子内我有一个切换。附加到它的on click事件无效。但如果表已经存在，那就可以了。由于ajax加载，onClick函数没有附加到它。代码如下所示

的jQuery

$(function() {
    $(document).on('click', '.mytable .toggle', function () {
    alert("toggle Clicked");
    });
});

在ajax之前的HTML

<div class="tabs">
    <ul class="tab-links" id="tab-links">

    </ul>

    <div class="tab-content" id="tab-content">

    </div>
</div>

ajax之后的HTML

<div class="tabs">
    <ul class="tab-links" id="tab-links">
        <li class="active"><a href="#tab1">Tab #1</a></li>        
    </ul>

    <div class="tab-content" id="tab-content">
        <div id="tab1" class="tab active" >
            <table id="mytable1" class="mytable">
                <tr data-depth="0" class="expand level0">
                    <td>
                    <span class="toggle expand">+</span>
                    Everything Else [<a class="link">99</a>]
                    </td>   
                    <td> 1$</td>    
                </tr>
            </table>
        </div>
    </div>
</div>

Answer 1

您的<span>为空：

<span class="toggle expand"></span>

更改为：

<td>
    <span class="toggle expand">Everything Else</span>
    [<a class="link">99</a>]
</td>

Answer 2

jQuery只能在尝试附件时将事件处理程序附加到DOM中已存在的元素。

在您的情况下，一旦DOM中存在与.mytable .toggle选择器匹配的元素，就需要附加click事件。目前，您在页面加载时附加它们。此时元素不存在，这就是单击处理程序永远不会附加的原因。

通过AJAX完成回调将表插入DOM后附加单击处理程序。

Answer 3

问题的答案就在于此。我当时没有在我的代码中使用$（文档）。我正在使用$（＆＃39; .tab＆＃39;）。当我把它改成$（文件）时，它开始正常工作。

动态加载表后，在td上重新附加jquery函数

3 个答案: