event handling - jQuery .on() is giving me the wrong "this" -

probably slap-my-forehead solution, but:

<div id="foo">    <!-- 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" }); 

clicking p alerts "foo". how return "bar_n", id of p clicked?

i'm targeting outer div because it's reliable , not going replaced via ajax. within .on() method, i'm targeting (subtargeting?) inner p because that's want bind click handler to. p's replaced periodically, , bindings lost, therefore, can't $('p').on(click...). can i?

you need add quote here click - 'click' , every thing fine then, fiddle submitted @arun.

try -

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