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?