registering click event on dynamically added buttons jQuery

Question

I am using bootstrap

Following is my code to dynamically fetch feeds and then add them on the page by appending inside the division whose id is 'feeds':

$.ajax({
    url: 'http://api.feedzilla.com/v1/categories/'+newsId+'/articles.json',
    type: 'GET',
    dataType: 'json',

    // to execute when successfully got json response
    success: function(response){
        $.each(response.articles, function(){
            var feed=   "<div class='media well'>"+
                            "<div class='media-body'>"+
                                "<h4 class='media-heading'>"+this.title+"</h4>"+
                                "<h6>"+this.publish_date+"</h6>"+
                                "<p>"+this.summary+"</p>"+
                                "<a href='"+this.url+"' target='_blank'>Continue Reading</a>"+
                            "</div><br><br>"+
                            "<button class='showinfo btn pull-right' id='info'>Show Info</button>"+
                        "</div>";

            $('#feeds').append(feed);
        });
    },

    // to execute when error
    error: function(jqXHR, textStatus, errorThrown){
        alert("Server error!");
    },

    // execute at last whether success or error
    complete: function(){

    }
});

As you can see I am adding a class 'showinfo' as well as id 'info' to dynamically added buttons.

Now following is my event handler:

    // SHOW INFO BUTTON CLICK HANDLER
    $('.showinfo').click(function(){
      alert('triggered');
    });

But it does not work :(!! neither with id: $('#info').click()!! If I don't add the button dynamically, it works perfect. Why this is so?

duplicate of thousand other questions... – A. Wolff Jun 24 '13 at 11:13 — A. Wolff, Jun 24 '13 at 11:13
the id attribute should be unique – HarryFink Jun 24 '13 at 11:14 — HarryFink, Jun 24 '13 at 11:14

techfoobar · Accepted Answer · 2013-06-24T11:16:44.433

19

Use on():

$('#feeds').on('click', '.showinfo', function() {
    alert('triggered');
});

The above binds any click event on any element matching .showinfo inside #feeds to the specified callback function.

Also, note that the elements that should match (.showinfo in this case) need not exist at the time of binding (hence it applies to dynamically added elements as well).

edited Jun 24 '13 at 11:16

answered Jun 24 '13 at 11:10

techfoobar

65,616
14
114
135

3

+1, but a bit of an explanation would feed him for a lifetime ;) – Reinstate Monica Cellio Jun 24 '13 at 11:11
2

@Archer - Yes. Was in the process of adding that actually. Done. – techfoobar Jun 24 '13 at 11:12
1

@techfoobar Thanks!! please feed me for the lifetime, add some explanation :D – kunal18 Jun 24 '13 at 11:14
1

@stalin - Have added some. Hope it helps. Also lookup, http://api.jquery.com/on/ – techfoobar Jun 24 '13 at 11:17
This video helped me https://www.youtube.com/watch?v=unk-U_LQWuA – Prem Oct 09 '16 at 15:35

score 4 · Answer 2 · answered Jun 24 '13 at 11:10

You have to do event delegation for dynamically added elements.

  // SHOW INFO BUTTON CLICK HANDLER
    $('#feeds').on("click",'.showinfo' ,function(){
      alert('triggered');
    });

And why on() works ??

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on().

score 2 · Answer 3 · answered Jun 24 '13 at 11:13

.click works for existing objects. If your controls are going to be added dynamically, then use .on(or live - but i's deprecated). It attaches the events for the objects which are added dynamically.

$('.showinfo').on('click', function(){
  alert('triggered');
});

registering click event on dynamically added buttons jQuery

I am using bootstrap

3 Answers3