title: script not activated by click event
body: <p>Hello i am written some script in jquery and bind that to a click event, but the code do not get activated by click event. But when i put the script in another JavaScript function and bind that JavaScript function to click event listener than the function is able to execute on clicking.</p>
  
  <p>Another thing is that when i bind the script using JavaScript it returns me alert message same number of time as the number of div on which i have clicked i.e. if i click on 3rd div the alert message is shown three times
  on my page the dom structure is of pdf.js project and this dom is created dynamically
  i want to get the index of grandchild of pagecontainer2 on which user had clicked
  following is my script:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(function() {
          $(".textLayer &gt; div", "#pageContainer2").click(function () {
              var index = $(this).index();
              alert("index of div is = " + index);
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Dom CODE :</p>
  
  <pre><code>&lt;div id="pageContainer2" &gt;
      &lt;canvas id="page2" width="741" height="959"&gt;&lt;/canvas&gt;
      &lt;div class="textLayer"&gt;
          &lt;div&gt;......some text here....&lt;/div&gt;
          &lt;div&gt;......some text here....&lt;/div&gt;
          &lt;div&gt;......some text here....&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="pageContainer3" &gt;
      &lt;canvas id="page3" width="741" height="959"&gt;&lt;/canvas&gt;
      &lt;div class="textLayer"&gt;
          &lt;div&gt;......some text here....&lt;/div&gt;
          &lt;div&gt;......some text here....&lt;/div&gt;
          &lt;div&gt;......some text here....&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;​
  </code></pre>