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

re-attaching jquery function on td after dynamically loading table

本文关键字：新附加 jquery 函数 td 加载 动态      更新时间：2023-09-26

我是jQuery新手。我正在通过ajax加载一个表。在桌子里面我有一个开关。附加到它的点击事件不起作用。但如果表格已经存在，它就可以正常工作。由于ajax加载，onClick函数没有附加到它。代码如下所示

jQuery 

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

Html在ajax出现之前

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

您的<span>为空:

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

更改为:

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

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

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

在AJAX完成回调将表插入DOM后，附加click处理程序。

答案就在问题中。我没有在我的代码中使用$(文档)。我使用$('.tab')。当我把它改成$(document)时，它开始工作了

相关文章：