title: apply event to elements using .on
body: <p><code>.on</code> not working on my page to apply click event to the elements loaded with ajax . <code>#myimageflow</code> is the container and i am loading images using ajax. when i am trying .on for click it is not working instead .live is working perfectly .</p>
  
  <pre><code>$(document).ready(function() {
      /*   Reading the data from XML file*/
      $.ajax({
          type: "GET",
          url: "photos.xml",
          dataType: "xml",
          success: function(xml) {
              $(xml).find('item').each(function() {
                  var path = $(this).attr('path');
                  var width = $(this).attr('width');
                  var height = $(this).attr('height');
                  var id = $(this).attr('id');
                  var alt = $(this).attr('alt');
                  var longdesc = $(this).find('longdesc').text();
                  var description = $(this).find('desc').text();
                  $('#myImageFlow').append('&lt;img src="' + path + '" id=' + id + '  height="' + height + '"  width="' + width + '" longdesc="' + longdesc + '" alt="' + alt + '"/&gt;');
                  imgArr[i] = description;
                  imgFront[i] = longdesc;
  
                  i = i + 1;
  
              });
          }
      });
  
      /* ===================================== */
      //$("#myImageFlow").show();
      $.getScript('js/iSlider.js');
      $.getScript('js/code.photoswipe.jquery-3.0.5.js');
  });
  
  /*front div called when front or back is called*/
  
  $('#myImageFlow').on("click", 'img', function() {
  
      alert("image clicked");
  });
  </code></pre>