jQuery how to bind onclick event to dynamically added HTML element

Question

I want to bind an onclick event to an element I insert dynamically with jQuery

But It never runs the binded function. I'd be happy if you can point out why this example is not working and how I can get it to run properly:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"        
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da">
        <head>
          <title>test of click binding</title>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
          <script type="text/javascript">


        jQuery(function(){
          close_link = $('<a class="" href="#">Click here to see an alert</a>');
          close_link.bind("click", function(){
            alert('hello from binded function call');
            //do stuff here...
          });
  
          $('.add_to_this').append(close_link);
        });
          </script>
        </head>
        <body>
          <h1 >Test of click binding</h1>
          <p>problem: to bind a click event to an element I append via JQuery.</p>

          <div class="add_to_this">
            <p>The link is created, then added here below:</p>
          </div>

          <div class="add_to_this">
            <p>Another is added here below:</p>
          </div>


        </body>
        </html>

EDIT: I edited the example to contain two elements the method is inserted to. In that case, the alert() call is never executed. (thanks to @Daff for pointing that out in a comment)

@Daff Unfortunately you're right! Then I have apparently extracted the part of my code that actually works. Thanks for pointing that out! — Jesper Rønn-Jensen, Oct 06 '09 at 13:54
@Daff, I edited the example so it containts two places to insert the method. Then it _really_ stopped working :) — Jesper Rønn-Jensen, Oct 06 '09 at 14:01

score 340 · Answer 1 · edited Oct 10 '13 at 12:47

340

All of these methods are deprecated. You should use the on method to solve your problem.

If you want to target a dynamically added element you'll have to use

$(document).on('click', selector-to-your-element , function() {
     //code here ....
});

this replace the deprecated .live() method.

edited Oct 10 '13 at 12:47

giannis christofakis

8,201
4
54
65

answered Oct 01 '12 at 13:03

aM1Ne

3,409
2
12
2

18

`*selector-to-your-element*` should be `'.some-class'` or `'#some-id'` – Alan Shortis Jun 14 '13 at 14:36
My issue was that I was doing something like `$('.row').on('click', function(){...});` instead of `$(document).on('click','.row',function(){...});` – Vishnoo Rath Jul 04 '13 at 11:48
8

Remember `$(document)` can be any element that doesn't change on your page. This prevents excessive event bubbling, speeding up your JS. Eg. `$(document)` -> `$('.example-container')` – Ricky Boyce Nov 18 '13 at 02:10
1

Detailed explanation - http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – Alexei Levenkov Aug 17 '16 at 20:35
How do I know which element if it is a list? – Matteo Aug 28 '21 at 04:29

score 73 · Accepted Answer · answered Oct 07 '09 at 08:33

73

The first problem is that when you call append on a jQuery set with more than one element, a clone of the element to append is created for each and thus the attached event observer is lost.

An alternative way to do it would be to create the link for each element:

function handler() { alert('hello'); }
$('.add_to_this').append(function() {
  return $('<a>Click here</a>').click(handler);
})

Another potential problem might be that the event observer is attached before the element has been added to the DOM. I'm not sure if this has anything to say, but I think the behavior might be considered undetermined. A more solid approach would probably be:

function handler() { alert('hello'); }
$('.add_to_this').each(function() {
  var link = $('<a>Click here</a>');
  $(this).append(link);
  link.click(handler);
});

answered Oct 07 '09 at 08:33

Tobias

1,938
16
12

2

there's a problem when you have to bind clicks on elements appended with other functions. That's why I suggest to use aM1Ne answer. – Edoardoo May 27 '14 at 12:23
2

Indeed, when you are targeting known markup structures created by some other code. But here he was inserting the elements himself, and there is no clear selector for them (it's just an anchor, which there might be many of), so he would have to add additional markup to be able to target the element. In that case it's just as easy to attach the handler to the element directly, instead of capturing all clicks and test for selector match. – Tobias May 28 '14 at 15:23
I understand your answer, didn't mean it was wrong. Surely, being able to dynamically inject some html (like a ul li of pictures loaded with ajax of infinite scroll stuff) and already having buttons bound to some action (like a lightbox) it's much more comfortable. – Edoardoo May 29 '14 at 09:58
2

This answer is also very helpful for cases where an older version of jQuery is available by default (eg. Drupal 7). `on()` was introduced in jQuery 1.7. – Wtower Jun 24 '14 at 08:18

score 50 · Answer 3 · edited May 23 '17 at 10:31

50

How about the Live method?

$('.add_to_this a').live('click', function() {
    alert('hello from binded function call');
});

Still, what you did about looks like it should work. There's another post that looks pretty similar.

edited May 23 '17 at 10:31

Community

1
1

answered Oct 06 '09 at 13:53

Brother Erryn

841
1
5
9

you are right that it actually worked. my mistake. So I have edited the question. – Jesper Rønn-Jensen Oct 06 '09 at 14:06
Yeah, this sort of problem is exactly what live events are intended to solve. – Powerlord Oct 06 '09 at 14:18
The problem is not related to live events though in this case a live event would solve it. The answer provided by Daff also solves the problem, and does it without adding the new concept of live events to the equation – Jesper Rønn-Jensen Oct 06 '09 at 14:25
I may also add, that currently, this would be the de-facto way of binding events. So today, I would also use `live()` in favor of `bind()`. – Jesper Rønn-Jensen Jun 24 '11 at 07:04
26

`live()` is now deprecated in favor of `on()` [link](http://api.jquery.com/on/) – TrophyGeek Jan 09 '12 at 22:15
1

[`live()`](http://api.jquery.com/live/) was deprecated and replaced by [`on()`](http://api.jquery.com/on/) in jQuery 1.9 – Walter Roman Nov 14 '14 at 22:14

score 25 · Answer 4 · answered Jun 13 '13 at 11:48

A little late to the party but I thought I would try to clear up some common misconceptions in jQuery event handlers. As of jQuery 1.7, .on() should be used instead of the deprecated .live(), to delegate event handlers to elements that are dynamically created at any point after the event handler is assigned.

That said, it is not a simple of switching live for on because the syntax is slightly different:

New method (example 1):

$(document).on('click', '#someting', function(){

});

Deprecated method (example 2):

$('#something').live(function(){

});

As shown above, there is a difference. The twist is .on() can actually be called similar to .live(), by passing the selector to the jQuery function itself:

Example 3:

$('#something').on('click', function(){

});

However, without using $(document) as in example 1, example 3 will not work for dynamically created elements. The example 3 is absolutely fine if you don't need the dynamic delegation.

Should $(document).on() be used for everything?

It will work but if you don't need the dynamic delegation, it would be more appropriate to use example 3 because example 1 requires slightly more work from the browser. There won't be any real impact on performance but it makes sense to use the most appropriate method for your use.

Should .on() be used instead of .click() if no dynamic delegation is needed?

Not necessarily. The following is just a shortcut for example 3:

$('#something').click(function(){

});

The above is perfectly valid and so it's really a matter of personal preference as to which method is used when no dynamic delegation is required.

References:

Daff · Answer 5 · 2009-10-06T14:30:39.980

2

Consider this:

jQuery(function(){
  var close_link = $('<a class="" href="#">Click here to see an alert</a>');
      $('.add_to_this').append(close_link);
      $('.add_to_this').children().each(function()
      {
        $(this).click(function() {
            alert('hello from binded function call');
            //do stuff here...
        });
      });
});

It will work because you attach it to every specific element. This is why you need - after adding your link to the DOM - to find a way to explicitly select your added element as a JQuery element in the DOM and bind the click event to it.

The best way will probably be - as suggested - to bind it to a specific class via the live method.

edited Oct 06 '09 at 14:30

answered Oct 06 '09 at 13:43

Daff

43,734
9
106
120

Thanks for answer, Daff. It can't be true that I can only add event listeners to elements in DOM. However, i will for now change my code to do that. (should be no problem as I just add special css class for the links added). – Jesper Rønn-Jensen Oct 06 '09 at 14:18
Yeah you are right it's not the DOM (it actually works with a single one), sorry. But I found out, too, that binding to dynamically created elements seems to be pretty annoying, as long as they are not selectable by a distinct jQuery selector. – Daff Oct 06 '09 at 14:34
"hello from BOUND function call." Sorry, there are too many of those on this post (whole page; question and answers) and I just want to help, you know, clear that up. – Scott Fraley Dec 11 '16 at 21:18

score 2 · Answer 6 · edited May 23 '17 at 12:34

It is possible and sometimes necessary to create the click event along with the element. This is for example when selector based binding is not an option. The key part is to avoid the problem that Tobias was talking about by using .replaceWith() on a single element. Note that this is just a proof of concept.

<script>
    // This simulates the object to handle
    var staticObj = [
        { ID: '1', Name: 'Foo' },
        { ID: '2', Name: 'Foo' },
        { ID: '3', Name: 'Foo' }
    ];
    staticObj[1].children = [
        { ID: 'a', Name: 'Bar' },
        { ID: 'b', Name: 'Bar' },
        { ID: 'c', Name: 'Bar' }
    ];
    staticObj[1].children[1].children = [
        { ID: 'x', Name: 'Baz' },
        { ID: 'y', Name: 'Baz' }
    ];

    // This is the object-to-html-element function handler with recursion
    var handleItem = function( item ) {
        var ul, li = $("<li>" + item.ID + " " + item.Name + "</li>");

        if(typeof item.children !== 'undefined') {
            ul = $("<ul />");
            for (var i = 0; i < item.children.length; i++) {
                ul.append(handleItem(item.children[i]));
            }
            li.append(ul);
        }

        // This click handler actually does work
        li.click(function(e) {
            alert(item.Name);
            e.stopPropagation();
        });
        return li;
    };

    // Wait for the dom instead of an ajax call or whatever
    $(function() {
        var ul = $("<ul />");

        for (var i = 0; i < staticObj.length; i++) {
            ul.append(handleItem(staticObj[i]));
        }

        // Here; this works.
        $('#something').replaceWith(ul);
    });
</script>
<div id="something">Magical ponies ♥</div>

score 1 · Answer 7 · answered Jun 06 '17 at 00:19

    function load_tpl(selected=""){
        $("#load_tpl").empty();
        for(x in ds_tpl){
            $("#load_tpl").append('<li><a id="'+ds_tpl[x]+'" href="#" >'+ds_tpl[x]+'</a></li>');
        }
        $.each($("#load_tpl a"),function(){
            $(this).on("click",function(e){
                alert(e.target.id);
            });
        });
    }

score 0 · Answer 8 · answered Oct 06 '09 at 13:47

0

I believe the good way it to do:

$('#id').append('<a id="#subid" href="#">...</a>');
$('#subid').click( close_link );

answered Oct 06 '09 at 13:47

yogsototh

14,371
1
22
21

I can't use #id to add to element, because I want to do this for many elements. See the updated code example :) – Jesper Rønn-Jensen Oct 06 '09 at 14:13

score -1 · Answer 9 · edited May 14 '17 at 05:37

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>    
<script>
    $(document).ready(function(){
        $(document).on('click', '.close', function(){
            var rowid='row'+this.id;
            var sl = '#tblData tr[id='+rowid+']';
            console.log(sl);
            $(sl).remove();
        });
        $("#addrow").click(function(){
            var row='';
            for(var i=0;i<10;i++){
                row=i;
                row='<tr id=row'+i+'>'
                    +   '<td>'+i+'</td>'
                    +   '<td>ID'+i+'</td>'
                    +   '<td>NAME'+i+'</td>'
                    +   '<td><input class=close type=button id='+i+' value=X></td>'
                    +'</tr>';
                console.log(row);
                $('#tblData tr:last').after(row);
            }
        });
    });

</script>
</head>
  <body>
    <br/><input type="button" id="addrow" value="Create Table"/>
    <table id="tblData" border="1" width="40%">
        <thead>
        <tr>
            <th>Sr</th>
            <th>ID</th>
            <th>Name</th>
            <th>Delete</th>
        </tr>
        </thead>
    </table>
    </body>
 </html>

jQuery how to bind onclick event to dynamically added HTML element

9 Answers9

Linked

Related