javascript - jquery .on() 来自追加

Question

我真的很困惑如何向 jquery 创建的元素添加点击事件。

现在，我生成这样的元素：

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

我的问题是当我尝试向元素“p”添加点击事件时。如果我做：

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

什么都不显示。但是如果我这样做：

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

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

我做错了什么？

score 4 · Accepted Answer

您的选择：

（推荐）您可以将该click事件绑定on到父元素上。这是最好的方法，因为无论其父级p内部的数量如何，它click始终附加到父级，这使得它变得干燥且性能更高。
```
$("YourParentElement").on('click', 'p', function(){
   alert('yai!');
});
```

您可以将事件处理程序与$("p")作为选择器放在循环之后。$.each那时您的p元素将位于 DOM 中，因此您可以将点击处理程序绑定到元素。（缺点：您会将点击处理程序附加到每一个p，如果您有大量类似p的 s，这有时是一种开销）

$.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) 绑定到document始终存在的对象，甚至在加载 jquery 之前。它现在不在 API 中。进入这些行，使用 . 绝对不是更好live。有关为什么live邪恶的信息，请访问此处和此处。

score 0 · Accepted Answer

我认为您需要尝试以下代码将点击事件绑定到段落标签。

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

希望这会帮助你。

javascript - jquery .on() 来自追加

2 回答 2

Related

Reference