title: registering click event on dynamically added buttons jQuery
body: <h1>I am using bootstrap</h1>
  
  <p>Following is my code to dynamically fetch feeds and then add them on the page by appending inside the division whose id is 'feeds':</p>
  
  <pre><code>$.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=   "&lt;div class='media well'&gt;"+
                              "&lt;div class='media-body'&gt;"+
                                  "&lt;h4 class='media-heading'&gt;"+this.title+"&lt;/h4&gt;"+
                                  "&lt;h6&gt;"+this.publish_date+"&lt;/h6&gt;"+
                                  "&lt;p&gt;"+this.summary+"&lt;/p&gt;"+
                                  "&lt;a href='"+this.url+"' target='_blank'&gt;Continue Reading&lt;/a&gt;"+
                              "&lt;/div&gt;&lt;br&gt;&lt;br&gt;"+
                              "&lt;button class='showinfo btn pull-right' id='info'&gt;Show Info&lt;/button&gt;"+
                          "&lt;/div&gt;";
  
              $('#feeds').append(feed);
          });
      },
  
      // to execute when error
      error: function(jqXHR, textStatus, errorThrown){
          alert("Server error!");
      },
  
      // execute at last whether success or error
      complete: function(){
  
      }
  });
  </code></pre>
  
  <p>As you can see I am adding a class 'showinfo' as well as id 'info' to dynamically added buttons. </p>
  
  <p>Now following is my event handler:</p>
  
  <pre><code>    // SHOW INFO BUTTON CLICK HANDLER
      $('.showinfo').click(function(){
        alert('triggered');
      });
  </code></pre>
  
  <p>But it does not work :(!! neither with id: $('#info').click()!! 
  <strong>If I don't add the button dynamically, it works perfect.</strong> Why this is so?</p>