Question

我真的很担心如何将click事件添加到由jquery创建的元素。

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

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

我的问题是当我尝试将click事件添加到元素“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元素）

我做错了什么？

Answer 1

您的选择：

（推荐）您可以在父元素上绑定click事件on。这是最好的方法，因为不管父项中p的数量是多少，click总是附加到父项，这使得它干燥且性能更高。
```
$("YourParentElement").on('click', 'p', function(){
   alert('yai!');
});
```

您可以在 $("p")循环之后将事件处理程序与$.each作为选择器放置。那时你的p元素将在DOM中，因此你可以将click处理程序绑定到元素。（缺点：您将点击处理程序附加到每个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是邪恶的信息，请转到here和here。

Answer 2

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

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

希望这会对你有所帮助。

jquery .on（）来自追加

2 个答案: