Javascript append中的jquery.on（）

对于如何向jquery创建的元素添加单击事件，我真的很困惑

现在，我生成如下元素：

$.ajax(
    params....
)
.done(function(item){
    $.each(item, function(i, some){
        a = '<p>some text</p>';
        $(node).before(a);
    }
});

他什么也没表现出来。但如果我这样做：

$.ajax(
    params....
)
.done(function(item){
    $.each(item, function(i, some){
        a = '<p>some text</p>';
        $(a).click(function(){
            alert('yai!');
        });
        $(node).before(a);
    }
});

$.ajax(
参数。。。。
)
.完成（功能（项目）{
$。每个（项目、功能（i、部分）{
a='一些文本
'；
$（a）。单击（函数（）{
警惕（“耶！”）；
});
$（节点）。在（a）之前；
}
});

它显示的警报太多（p元素的数量相同）

我做错了什么？

您的选择：

（推荐）您可以绑定父元素上的

单击
事件
。这是最好的方法，因为无论父元素中
p
的数量多少，
单击
始终附加到父元素，这使其干燥且性能更高

$("YourParentElement").on('click', 'p', function(){
   alert('yai!');
});

您可以将事件处理程序以

$（“p”）

作为选择器放置在

$之后。每个
循环。此时
p
元素将位于DOM中，因此您可以将单击处理程序绑定到元素。（缺点：将单击处理程序附加到每个
p
，如果有大量类似的
p
，这有时会造成开销）

$.ajax(
参数。。。。
).完成（功能（项目）{
$。每个（项目、功能（i、部分）{
a='一些文本
'；
//是Click（）造成的////////
//循环多次//
$（节点）。在（a）之前//
}); ///////////////////////////////////////
//
///搬到这里
$（“p”）。单击（函数（）{
警惕（“耶！”）；
});
});

您可以将此元素（

p

）绑定到始终存在的

文档

对象，即使在加载jquery之前也是如此。而且它现在在API中并不存在。在这些行中，使用

live

肯定不是更好的选择。有关

live

为什么是邪恶的信息，请继续

---

我认为您需要尝试下面的代码来将单击事件绑定到段落标记

$("p").click(function(){
    alert("clicked");
});

---

希望这能对您有所帮助。

在第二种情况下，您实际上不应该看到任何警报。您绑定处理程序的元素从未添加到DOM中（您将解析HTML字符串两次，一次使用

$（a）

，一次使用

.beofre（a）

，从而创建两个不同的DOM元素）。但可能您将代码简化得太多。我建议您阅读文档以了解事件处理程序：。将

$（'p'）

替换为

$（文档）

为那些

p

分配一个类，以便轻松处理它们。

live

的主要原因是它没有进行不必要的选择，而不是它绑定到文档上。注意：）在我的辩护中，我没有说

live

是邪恶的原因，我只是将OP指向链接：）好的，也许这会起作用，但是如果父元素也是由jquery生成的，会发生什么呢？在某个点上会有一个静态的父元素。它不必是立即的。只是个家长

$.ajax(
  params....
).done(function(item){
   $.each(item, function(i, some){
       a = '<p>some text</p>';   
       // Click() was here causing it ////////
       //  to loop multiple times           //
       $(node).before(a);                   //
   }); ///////////////////////////////////////
       //
     / / / moved here
    $("p").click(function(){
        alert('yai!');
    });
 });

$("p").click(function(){
    alert("clicked");
});