title: AJAX loaded content use .ON or add the script in the ajax request page?
body: <p>I have a <code>view more</code> option in my website <code>index</code> page that I load using a AJAX.
  this will bring more content to user from <code>page_ajax.php</code>.</p>
  
  <p>The problem is this <code>DOM</code> content need a JQUERY click event. </p>
  
  <p><code>&lt;span class=productinfo&gt;product info&lt;/span&gt;</code></p>
  
  <p>My question is, where should I add the <code>&lt;script&gt;</code> tag? in the <code>index.php</code> page or in the <code>page_ajax.php</code> (that will load jquery in each call)?</p>
  
  <p>If I add in index.php jquery will not work, should I add the script tag in page_ajax.php? or <strong>should I use .ON</strong> in index jquery? how would it be? Can someone give me an example?</p>
  
  <pre><code>&lt;script&gt;
  $(function() {
  $(".productinfo").click(function(){
  
  var element = $(this);
  var I = element.attr("data-id");
  var info = 'id=' + I;
  
   $.ajax({
     type: "POST",
     cache: false,
     url: "/product.php",
     dataType: "json",
     data: info,
  
    success: function(data) {
      alert(data);
    }
  
   });
  return false;
  });
  });
  &lt;script&gt;
  </code></pre>