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

我不熟悉jQuery。我正在通过ajax加载一个表。在桌子里面我有一个开关。附加到它的单击事件不起作用。但是如果这个表已经存在，它就可以正常工作了。由于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>

您的帐户是空的：

<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事件。当前，您正在页面加载时附加它们。此时元素不存在，这就是为什么单击处理程序永远不会被附加

---

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

答案在问题中。我没有在代码中使用$document。我使用的是$'.tab'。当我将其更改为$document时，它开始正常工作。

看看这个learn.jquery.com/events/event-delegation/尽管看起来您实际上是在授权。但是，您的带有类切换的span似乎不包含任何内容，因此您永远无法实际单击它，因为它占用0个像素。您的代码看起来不错。只需在span中添加一些文本。你好，Rob Schmuecker，它有CSS，可以显示图像，正如您在这里看到的：它没有任何空格。答案在问题中。我没有在代码中使用$document。我使用的是$'.tab'。当我将其更改为$document时，它开始正常工作。@这将正常工作，但单击处理程序将附加到整个文档。基本上，这意味着无论在哪里单击，单击处理程序都将启动。如果那是我想要的，那就太好了。但是，如果您只想在单击特定元素时启动它，那么您应该考虑接受我的建议。