title: on() click to bind event to AJAX returned elements
body: <p>I've just read some threads about using <code>on()</code> to attach events to dynamically created html elements. I came up with this example <strong>(<a href="http://jsfiddle.net/4XmUu/47/" rel="nofollow">FIDDLE</a>)</strong> to try to bind the <code>click</code> event to elements <code>div.clicktitle</code> returned via AJAX. The div elements have data attributes from which the click event should get the values and then display them. But It doesn't seem to be working. </p>
  
  <p>What is working for me is to define the <code>click</code> event function and put it in the Ajax success callback. <strong>(<a href="http://jsfiddle.net/4XmUu/46/" rel="nofollow">FIDDLE</a>)</strong> Is that the only way to make the click event to work with AJAX returned elements? Can anyone tell me why <code>.on()</code> isn't attaching the event to <code>div.clicktitle</code>?</p>
  
  <p>HTML before Ajax</p>
  
  <pre><code>&lt;div class="main"&gt;&lt;/div&gt;
  &lt;div class="second"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>After Ajax it should be</p>
  
  <pre><code>&lt;div class="main"&gt;&lt;div data-source="Hello" class="clicktitle"&gt;&lt;h6&gt;Title1&lt;/h6&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;div class="second"&gt;&lt;div data-source="Hello" class="clicktitle"&gt;&lt;h6&gt;Title2&lt;/h6&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JS Code:</p>
  
  <pre><code> $.ajax({
      url: "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20rss%20where%20url%3D%22https%3A%2F%2Fnews.google.com%2F%3Foutput%3Drss%22&amp;format=json&amp;diagnostics=true&amp;callback=",
      success: function (data) {
          var length = 0;
          var items = data.query.results.item;
          items = items.map(function(item){
  
          return '&lt;div data-source="Hello" class="clicktitle"&gt;&lt;h6 style="background:beige;"&gt;'+item.title+'&lt;/h6&gt;&lt;/div&gt;';
          });
          var half = items.length/2;
          for(var i = 0; i &lt; items.length; i++)
              if(i &lt; half)
                  $('.main').append(items[i]);
              else
                  $('.second').append(items[i]); 
              length++;
          },
  
      error: function () {}        
  });
  
  
      $('.clicktitle').on("click",function(){
        var datasource = $(this).data('source');
        $(this).text(datasource); 
      });
  </code></pre>