title: jQuery, Masonry, JWPlayer, Infinite-Scroll Append "<script></script>" Tags within PHP Include File Doesn't Work
body: <p>First I will provide a quick overview of what I am trying to accomplish.</p>
  
  <p>I have a main PHP page that loads images, text, and videos (which play using JWPlayer) from a mySQL database and uses Masonry for the layout. I am also using Infinite-Scroll which loads additional content using the following code:</p>
  
  <pre><code>$container.masonry( 'appended', $newElems, true ); 
  </code></pre>
  
  <p>Additional Content is loaded via a PHP page called loadMore.php</p>
  
  <pre><code>&lt;nav id="page-nav"&gt;
  &lt;a href="loadMore.php?n=2"&gt;&lt;/a&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Within the above <strong>lodeMore.php</strong> page I am loading more text, images and videos from the database. If an item loaded from the database is a video I attempt to display it using a php include file called "<strong>videoPlayer.php</strong>". The code for this PHP include file is as follows:</p>
  
  <pre><code>&lt;?PHP
  echo"&lt;div id='$i'&gt;Loading the video player ...&lt;/div&gt;
  &lt;script type='text/javascript'&gt;
  jwplayer('$i').setup({
      flashplayer: 'player.swf',
      image: '$imagePath',
      skin: 'images/slim.zip',
      width: 250,
      height: 141,
      plugins: {
              gapro: { accountid: 'UA-30548455-1'}
          },
      file: '$videoPath'
  });
  &lt;/script&gt;";
  ?&gt;
  </code></pre>
  
  <p>The above file works fine for video content that is displayed when the <strong>main page</strong> initially loads, however, if it is loaded via <strong>append</strong> and the <strong>loadMore.php</strong> page it doesn't display the above javascript for the video player.</p>
  
  <p>I have discovered that it appears that you can't use append to append content that contain <code>&lt;script&gt; &lt;/script&gt;</code>
  tags because the <code>&lt;/script&gt;</code> tag causes the append to stop or close. I have tried various solutions I have come across on here including closing the script tag using <code>&lt;\/script&gt;</code> instead, however, even this doesn't seem to work.</p>
  
  <p>If anyone can provide some insight or a possible way that I can use append to get the <code>&lt;script&gt;&lt;/script&gt;</code> tags for the video player to work that would be great!</p>
  
  <ul>
  <li><p>Hi jwatts, so here is my code including the code you recommended I ad: </p>
  
  <pre><code>$(function(){
  var $container = $('#container');
  
  $container.imagesLoaded(function(){
    $container.masonry({
      itemSelector: '.box',
      columnWidth: 295,
      isAnimated: !Modernizr.csstransitions,
      isFitWidth: true
    });
  });
  
  $container.infinitescroll({
    navSelector  : '#page-nav',    // selector for the paged navigation 
    nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
    itemSelector : '.box',     // selector for all items you'll retrieve
    loading: {
        finishedMsg: 'No more pages to load.',
        img: 'http://i.imgur.com/6RMhx.gif'
      }
    },
    // trigger Masonry as a callback
    function( newElements ) {
  
      // hide new items while they are loading
      var $newElems = $( newElements ).css({ opacity: 0 });
      // ensure that images load before adding to masonry layout
      $newElems.imagesLoaded(function(){
        // show elems now they're ready
        $newElems.animate({ opacity: 1 });
        $container.masonry( 'appended', $newElems, true );
  
        alert("test");
  
        //Find Image and Video Paths from Div tags
        $($newElems).find("div.content-container").each( function() {
          var imgpath = $(this).find("div.content-imgpath").text();
          var vidpath = $(this).find("div.content-vidpath").text();
          var id = $(this).find("div.content-id").attr("id");
          loadPlayer( id, imgPath, vidPath );
          });
  
        alert("test 2");
  
        //Hide Paths
        /*
        div.content-imgpath, div.content-vidpath {
          display: none;
          }
      */
  
  
      });
    }
  );
  </code></pre>
  
  <p>});</p></li>
  </ul>
  
  <p>After I call masonry, I added the code you recommended, but it seems to be having some troubles as the first alert of <strong>test</strong> works, but the second <strong>test 2</strong> doesn't seem to be working. Also I have commended out the code to hide the image and video path because for some reason it seems to be preventing the loading of additional conent via loadMore.php.</p>
  
  <p>Any ideas what I have missed? I have added the <strong>loadPlayer</strong> javascript function for the JWVideo player at the top of the main page as well.</p>