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 оповещения "фу". Как мне вернуть "bar_n", идентификатор p что было нажато?

Я нацеливаюсь на внешнюю div потому что это надежно и не будет заменено через AJAX. В методе.on() я нацеливаюсь (нацеленность?) На внутренний 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, но я считаю, что второй метод должен работать просто отлично.