两个 Ajax 动态创建的元素无法相互识别答案

【问题标题】：Two Ajax dynamically created elements can't recognize each other两个 Ajax 动态创建的元素无法相互识别
【发布时间】：2014-02-19 14:11:44
【问题描述】：

尊敬的 Stack Overflow 社区，

我一直在尝试开发一个表格创建器，它可以在单击按钮时动态创建两个表格。这已经奏效了……至少现在还没有。

现在我正在生成一个带有类标题的<p> 元素和一个带有类内容的<div> 元素。当p被点击时，内容被slideToogled。

我尝试过将on() 与 jQuery 一起使用或将任何函数附加到

元素，但它似乎不起作用。 .hide() 也不适用于非常烦人的内容。谁能给我一些关于如何解决这个问题的建议？

On 似乎适用于我用 HTML 编写的内容，但它不适用于附加到 div 的 AJAX 生成代码。

下面是相关的sn-ps代码：阿贾克斯：

function submition() {
        $.ajax({
            type: 'GET',
            url: 'phpQueries.php?q=getQueryBuilder&schools=' + mySchools.toString()+ '&depts=' + myDeps.toString() + '&lvls=' + myLevs.toString() + '&srcs='+mySrc.toString() + '&codes='+myCodes.toString(),
            success: function (data) {
                $("#dump_here").append(data);
            }
        });

jquery:

$(".heading").on("click", function() {
                alert("Hello World");
                $(this).next(".content").slideToggle(500);
          });

PHP：

echo '<p class="heading">See/Hide Comments</p> ';
    echo '<div class="content">I am I am I am.... Superman!</div>';

亲切的问候，金皮奥

【问题讨论】：

通常是这样。你能应该你的代码吗？
代码已更新。
HTML 是什么样的？哪些部分是动态部分？ .heading 是动态的吗？您在哪里（以及何时）附加click 处理程序？ .on() 函数应附加到在附加处理程序时实际存在的父元素，并应使用选择器过滤从动态生成的元素中冒出的事件。

标签： javascript jquery html css ajax

【解决方案1】：

这是因为（如果我理解正确的话）您在分配 click 事件处理程序后创建了一个带有 heading 类的 <p> 标记。

您想要做的是 delegate your events 到包含您的 <p> 标记的容器。所以，让我们假设这是你的结构：

<div id="dump_here"></div>

然后在 JavaScript 中执行此操作：

$("#dump_here").on("click", ".heading", function () {
    ....

这样，您将事件处理程序分配给已经存在的父容器，并且一旦您单击段落，事件就会冒泡。现在，您可以在该容器内向 HTML 动态添加新元素，并且您的事件处理程序仍然可以工作。

这是为什么呢？因为您不能将事件处理程序分配给不存在的元素。

当你这样做时：

$(".something").click(...)

当您单击页面上具有something 类的任何元素时，您不会告诉 Javascript 做某事，而是为页面上每个已经存在的something 分配一个事件处理程序。如果你创建一个新元素，即使是同一个类，你仍然需要为其分配一个事件处理程序。

引用自 jQuery 文档：

事件处理程序仅绑定到当前选定的元素；当您的代码调用.on()时，它们必须存在于页面上

还有 David Walsh wrote a nice article 解释事件委托。

希望这会有所帮助。

【讨论】：

精彩的答案。我不确定如何正确使用 on() 。现在我愿意。惊人的帮助！

【解决方案2】：

改变这个：

$(".heading").on("click", function() {
    alert("Hello World");
    $(this).next(".content").slideToggle(500);
});

到：

$(document).on("click", ".heading", function() {
    alert("Hello World");
    $(this).next(".content").slideToggle(500);
});

或者，您可以将 $(".heading").on("click", ...) 的定义放入您的 AJAX 成功回调中，但如果您有多个 .heading 元素，您将遇到多个事件在 AJAX 运行之前存在的元素的绑定，比如它是否运行两次并附加 2 个表。您的方法不起作用的原因是元素必须在事件绑定之前存在。我建议的第一个选项有效，因为文档是事件绑定的位置，最后一个选项有效，因为它在创建元素的 AJAX 的回调中，因此元素在绑定时存在。

【讨论】：

【解决方案3】：

假设这是你的 HTML：

<div id="dump_here">
    <!-- contents here are dynamic - these don't exist when the page first loads -->
    <p class="heading">See/Hide Comments</p>
    <div class="content">I am I am I am.... Superman!</div>
    <!-- end of dynamic content -->
</div>

现在准备好文档，您可以附加您的处理程序：

$(function() {
    // $(".heading").click(//...this won't work, heading doesn't exist on load
    $("#dump_here").on("click",".heading",function() {
        // this will work - the handler is attached to an element that exists on load
        // and will respond to event that bubble up from elements with the class 'heading'
    });

    submition();   // async function that populates your dynamic parts.
});

请务必阅读.on()上的文档

要理解的重要部分是：

$(".heading")

这将返回一个 jQuery 对象的集合，这些对象表示具有 heading 类的 DOM 元素。如果执行该行时 DOM 中没有匹配的元素，则您将拥有一个空集合。但是 jQuery 不会抱怨这一点，仍然会让你链接到那个空集合：

$(".heading").on("click", function() { //...

上面写的是attach an event handler to all the matching dom elements in my collection that will execute this function when the click event is triggered。但是如果你的集合是空的，它不会做任何事情。

【讨论】：