jquery - jQuery .on() 给了我错误的“这个”

Question

可能是一个打我额头的解决方案，但是：

<div id="foo">
   <!-- this will all be replaced periodically via AJAX -->
   <p id="bar_1">click me</p>
   <p id="bar_2">click me</p>
   <p id="bar_3">click me</p>
   <!-- end AJAXed section -->
</div>

$('#foo').on(click,'p',function(){
   alert($(this).attr('id'));
   //returns "foo"
});

单击任何p警报“foo”。如何返回“bar_n ”p ，即被点击 的 id ？

我的目标是外部div，因为它是可靠的，不会被 AJAX 取代。在 .on() 方法中，我的目标是（子目标？）内部p，因为这是我真正想要将点击处理程序绑定到的目标。所有的 p 都会定期更换，并且它们的绑定会丢失，因此，我不能简单地说$('p').on(click...). 我可以吗？

Answer 1

您需要在此处添加报价，click 例如-'click'然后一切都会好起来的，@Arun 已经提交了小提琴。

试试这个 -

$('#foo').on('click','p',function(){
   alert($(this).attr('id'));
   //returns "foo"
});

Answer 2

两种解决方案：

代替

$('#foo').on('click','p',function(){

和

$('#foo p').on('click',function(){

（如前所述，您需要在点击周围加上引号）。

或者，更换

alert($(this).attr('id'));

和

alert($(event.target).attr('id'));

我不能保证第一种方法可以很好地处理 AJAX 负载，但我相信第二种方法应该可以正常工作。