title: JQUERY infinit scrolling, applying a script to newly loaded elements
body: <p>I am using Yii framework. I want to have infinit scrolling for my contents (pictures). This part works fine. My only problem is that I have to have a script to have some effects on my images (like making them bigger and showing some text when they get clicked). This script works fine when I do not have infinite scroll:</p>
  
  <pre><code>&lt;?php
  
     Yii::app()-&gt;clientScript-&gt;registerScript('overlayimage','
          $(".overlay").hide();
  
          $(".box").click(function() {
  
              if($(this).hasClass("col5"))
              {
                  $(this).removeClass("col5").addClass("col3").fadeIn(400).find(".overlay").fadeOut(400);
                  $(".items").masonry("reload");
                  $(this).clearQueue();
              }
  
              else
              {
                  $(".items").find(".col5").removeClass("col5").addClass("col3").fadeIn(400).find(".overlay").fadeOut(400);
                  $(this).removeClass("col3").addClass("col5").fadeIn(400).find(".overlay").fadeIn(400);
                  $(".items").masonry("reload");
                  $(this).clearQueue();
              }
  
          })
     ',CClientScript::POS_READY);
  ?&gt;
  </code></pre>
  
  <p>However when there is infinit scroll (The script is in <code>CClientScript::POS_LOAD</code>), the script doesnot work on the newly added elements. I tried to add the same script after infinit scroll in <code>CClientScript::POS_LOAD</code> but in this case for some of the elements the script gets executed 2 times and I think it is not the right way to repeat the code in different places.</p>
  
  <p>Anybody can help me to find out where I should put my script to be executed also for the newly loaded elements?</p>
  
  <p>Just in case <a href="http://xycomm.linkmesrl.com/site/etaoin" rel="nofollow">here</a> is the example page that has the problem.</p>