title: javascript not working on data returned from ajax
body: <p>I have a JavaScript abc.js that is running on a div (class one) element. The script is working fine on elements located within the div element in the html code, but it's not working on data returned from success ajax call that appended to id=tow element.</p>
  
  <p>Here is the code;</p>
  
  <p><strong>HTML</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script type="text/javascript" src="abc.js"&gt;&lt;/script&gt;
  &lt;div class="one"&gt;
      &lt;ul id="tow"&gt;
          &lt;li&gt;
              &lt;a href="images.jpg"&gt;
                    &lt;img src="images/a1.jpg"/&gt;
                    &lt;span&gt;
                    &lt;div class="title"&gt;&lt;img src="Images/a2.jpg" /&gt;&lt;/div&gt;
                    &lt;/span&gt;
              &lt;/a&gt;
          &lt;/li&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function () {
      $('#search').click(function () {
          if (cid != 0) {
              $.ajax({
                  type: "POST",
                  url: 'ajax.php',
                  data: {
                      aid: aid,
                      cid: cid,
                      sid: sid
                  },
                  success: function (data) {
                   $("#tow").html(data);
                  }
              });
          }
      });
  });
  </code></pre>
  
  <p>The data returned from success ajax is:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;li&gt; &lt;a href="images3.jpg"&gt;&lt;img src="images/a4.jpg"/&gt;
           &lt;span&gt;
            &lt;div class="title"&gt;&lt;img src="Images/a5.jpg" /&gt;&lt;/div&gt;
           &lt;/span&gt;
        &lt;/a&gt;
  &lt;/li&gt;
  </code></pre>