title: how to control elements dynamically added to the DOM?
body: <p>It's a fairly serious problem for me, because I do not know how to program if it takes more than using simple jquery or ajax codes.</p>
  
  <p>To sum up my situation, first of all, I start by saying that I am using a CMS called XE, which is quite similar to wordpress.
  (see the link : <a href="https://github.com/xpressengine/xe-core" rel="nofollow">https://github.com/xpressengine/xe-core</a> even though English isn't supported for documents)</p>
  
  <p>As you can see, the following link is a board that's built using this XE CMS.</p>
  
  <p><a href="http://lifeto.cafe24.com/xe/htmlcss" rel="nofollow">http://lifeto.cafe24.com/xe/htmlcss</a></p>
  
  <p>XE uses its own $function to call document</p>
  
  <p>for example, this is the code from the page i linked above, that opens an article when click on the title of each articles</p>
  
  <pre><code>&lt;a href="{getUrl('document_srl',$document-&gt;document_srl, 'listStyle',
   $listStyle, 'cpage','')}"&gt;&lt;strong&gt;{$document-&gt;getTitle()}&lt;/strong&gt;&lt;/a&gt;
  </code></pre>
  
  <p>It worked all fine, until I decided to add this ajax jquery plugin called infinite scrolling js.</p>
  
  <p><a href="http://www.infinite-scroll.com/" rel="nofollow">http://www.infinite-scroll.com/</a></p>
  
  <p>Because this js plugin adds articles dynamically into the DOM, as you can see it on my website, the rest of the articles-except just the one first article- are not opening up, when i click on the thumbnails. (it might open up the layer itself, but it does not provide the exact document address given by the CMS - notice if you click on the '3' item, it still shows '4' item on the div)</p>
  
  <p>below is the scripts I use in order to : open a layer that contains article, close the layer, and to load contents (articles) into the opened layer.</p>
  
  <pre><code>jQuery('body').on('click', '.list_content_link', function() {
          jQuery('.list_content_container').toggleClass('show');
  
  
   jQuery.post('{getUrl('document_srl',$document-&gt;document_srl, 'listStyle', $listStyle, 'cpage','')}', function(pageContent) {
  
          jQuery(".loader_container").empty().html('&lt;div class="loader"&gt;&lt;div class="loader-inner line-scale-pulse-out-rapid"&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;');
  
      jQuery('.list_content').load('{getUrl('document_srl',$document-&gt;document_srl, 'listStyle', $listStyle, 'cpage','')} .board_container');
      });        
  });
  
      jQuery('body').on('click', '.list_content_container', function() { jQuery('.list_content_container').removeClass('show');
  
  });
  });`
  </code></pre>
  
  <p>I have already asked this question to one of the developers of this CMS, but only thing he said was, it has to be done by</p>
  
  <p>jQuery.post or jQuery.load only using JS, 
  not using php or XE specific codes, as the  'getUrl( ... $document->document_srl ... ) ' gets interpreted in the server and the client cannot provide any information.</p>
  
  <p>Can any one see what the problem im having?</p>
  
  <p>If any information you request, i can provide you to fix this problem once and for all.
  I would appreciate your help. thanks.</p>