jquery .on() from append

Question

I'm really confuse about how to add a click event to element created by jquery.

Now, I generate elements like this:

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

my problem is when I try to add a click event to element "p". If I do:

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

Is showing nothing. BUt if I do:

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

It show too many alerts (the same number of p elements)

What I'm doing wrong?

In the second case you should not see any alert actually. The element you bind the handler to is never added to the DOM (you are parsing the HTML string twice, once with `$(a)` and once with `.beofre(a)`, thus creating two different DOM elements). But maybe you simplified the code too much. I recommend to read the documentation to learn about event handlers: http://learn.jquery.com/events/. — Felix Kling, Jun 08 '13 at 18:23
Assign a class for those `p`'s in order to handle them easily. — Omar, Jun 08 '13 at 18:59

score 4 · Accepted Answer · edited May 23 '17 at 12:28

Your options:

(recommended) You could bind that click event on on the parent element. This is the best method because irrespective of the number of p inside its the parent the click is always attached to the parent and that makes it DRY and more performant.
```
$("YourParentElement").on('click', 'p', function(){
   alert('yai!');
});
```

You could place your event handler with $("p") as selector after the $.each loop. At that time your p elements would be in DOM and so you can bind the click handler to the element. (Disadvantage : You'd be attaching the click handler to every single p, which is sometimes an overhead if you have a large number of similar ps)

$.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!');
    });
 });

You could bind this element (p) to the document object which always exists, even before jquery is loaded. And its not there now in the API. Going in those lines, it definitely not better to use live. For info on why live is evil, go here and here.

The main reason against `live` is that it did unneccessary selection, not that it bound to the document — John Dvorak, Jun 08 '13 at 19:17
noted :) in my defense i didnt speak abt the reasons why `live` was evil, i just pointed OP to the link :) — krishwader, Jun 08 '13 at 19:21
OK, maybe will this work, but what happens if the parent element is generated by jquery too? — papelucho, Jun 08 '13 at 20:32
There will be a parent element at some point which is static. It neednt be immediate. Just a parent — krishwader, Jun 08 '13 at 20:33

score 0 · Answer 2 · answered Jun 08 '13 at 19:14

0

I think you need to try below code to bind click event to paragraph tag.

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

Hope this will help you.

answered Jun 08 '13 at 19:14

Prashant

692
2
11
26

jquery .on() from append

2 Answers2