Question

亲爱的Stack Overflow社区，

我一直在尝试开发一个表创建器，在单击按钮时动态创建两个表。这有用......好吧至少现在还没有。

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

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

元素，但它似乎不起作用。此外，.hide()不适用于非常烦人的内容。任何人都可以就如何处理这个问题给我一些建议吗？

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

以下是代码的相关摘要： Ajax的：

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

亲切的问候， Gempio

Answer 1

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

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

<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解释事件代表团。

希望这有帮助。

Answer 2

所以，让我们说，这是你的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>

现在，在doc准备就绪时，您可以附加处理程序：

$(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。但是如果你的收藏是空的，它将不会做任何事情。

Answer 3

改变这个：

$(".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的回调中，因此元素在绑定时就存在。

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

3 个答案: