jQuery，Masonry，JWPlayer，無限滾動追加「<script></script>」PHP包含文件中的標籤不起作用

Question

首先，我將簡要介紹一下我正在嘗試完成的內容。

我有一個從MySQL數據庫中加載圖片，文字和視頻（使用JWPlayer其中扮演），並使用砌體的佈局的主PHP頁面。我也使用無限捲動它加載使用下面的代碼附加內容：

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

其他內容是通過所謂的loadMore.php

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

在上述lodeMore.php一個PHP頁面加載頁面我正在從數據庫中加載更多文本，圖像和視頻。如果從數據庫加載的項目是視頻，我嘗試使用名爲「videoPlayer.php」的php包含文件來顯示它。此PHP代碼包含文件如下：

<?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>"; 
?> 

上述文件工作正常，當主頁最初加載，然而，如果通過加載追加和顯示視頻內容loadMore.php頁面不顯示上述視頻播放器的JavaScript。

我發現看起來你不能使用append追加包含<script> </script> 標籤的內容，因爲</script>標籤會導致append停止或關閉。我嘗試了各種解決方案，包括使用<\/script>來關閉腳本標記，但是，即使這似乎不起作用。

如果任何人都可以提供一些見解或可能的方式，我可以使用附加獲得視頻播放器的<script></script>標籤工作，這將是偉大的！

• 嗨jwatts，所以這裏是我的代碼包括代碼，你推薦我的廣告：

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

  }）;

我叫磚石後，我加你推薦的代碼，但它似乎有一些麻煩爲測試作品第一個警報，但第二測試2似乎並沒有被加工。此外，我還推薦隱藏圖像和視頻路徑的代碼，因爲由於某種原因，它似乎阻止了通過loadMore.php加載額外的內容。

什麼我已經錯過了任何想法？我爲主頁頂部的JWVideo播放器添加了loadPlayer javascript函數。

Answer 1

也許創建主網頁上的功能加載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 
    }); 
} 

返回HTML這樣的：

<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> 

確保圖片的路徑和視頻路徑隱藏：

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

撥打電話masonry後可以這樣做：

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

更新：修正了上述變量名稱...