jQuery, Masonry, JWPlayer, Infinite-Scroll Append “<script></script>” Tags within PHP Include File Doesn't Work

问题

First I will provide a quick overview of what I am trying to accomplish.

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:

$container.masonry( 'appended', $newElems, true ); 

Additional Content is loaded via a PHP page called loadMore.php

<nav id="page-nav">
<a href="loadMore.php?n=2"></a>
</nav>

Within the above lodeMore.php 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 "videoPlayer.php". The code for this PHP include file is as follows:

<?PHP
echo"<div id='$i'>Loading the video player ...</div>
<script type='text/javascript'>
jwplayer('$i').setup({
    flashplayer: 'player.swf',
    image: '$imagePath',
    skin: 'images/slim.zip',
    width: 250,
    height: 141,
    plugins: {
            gapro: { accountid: 'UA-30548455-1'}
        },
    file: '$videoPath'
});
</script>";
?>

The above file works fine for video content that is displayed when the main page initially loads, however, if it is loaded via append and the loadMore.php page it doesn't display the above javascript for the video player.

I have discovered that it appears that you can't use append to append content that contain <script> </script> tags because the </script> 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 <\/script> instead, however, even this doesn't seem to work.

If anyone can provide some insight or a possible way that I can use append to get the <script></script> tags for the video player to work that would be great!

• Hi jwatts, so here is my code including the code you recommended I ad:

  $(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;
          }
      */
  
  
      });
    }
  );
  

  });

After I call masonry, I added the code you recommended, but it seems to be having some troubles as the first alert of test works, but the second test 2 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.

Any ideas what I have missed? I have added the loadPlayer javascript function for the JWVideo player at the top of the main page as well.

回答1:

Perhaps create a function on the main page that loads jwplayer

function loadPlayer(id, imgPath, vidPath) {
  jwplayer(id).setup({
    flashplayer: 'player.swf',
    image: imgPath,
    skin: 'images/slim.zip',
    width: 250,
    height: 141,
    plugins: {
            gapro: { accountid: 'UA-30548455-1'}
        },
    file: vidPath
  });
}

Return HTML like this:

<div class="content-container">
   <div class="content-imgpath">path name here</div>
   <div class="content-vidpath">vid path here</div>
   <div class="content-id" id='$i'>Loading the video player ...</div>
</div>

Make sure the image path and video path are hidden:

div.content-imgpath, div.content-vidpath {
   display: none;
}

After you call masonry do this:

$($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 );
});

Update: Fixed the variable name above...

来源：https://stackoverflow.com/questions/10627479/jquery-masonry-jwplayer-infinite-scroll-append-script-script-tags-withi