jQuery，Masonry，JWPlayer，Infinite-Scroll在PHP Include文件中附加“ ”标签不起作用

首先，我将简要概述一下我要完成的工作。

我有一个主要的PHP页面，它从mySQL数据库加载图像，文本和video（使用JWPlayer播放），并使用Masonry进行布局。 我也在使用Infinite-Scroll，它使用以下代码加载其他内容：

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

其他内容通过名为loadMore.php的PHP页面加载

在上面的lodeMore.php页面中，我正在从数据库中加载更多的文本，图像和video。 如果从数据库加载的项目是video，我尝试使用名为“ videoPlayer.php ”的php包含文件显示它。 这个PHP包含文件的代码如下：

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

上面的文件适用于主页最初加载时显示的video内容，但是，如果它是通过append和loadMore.php页面加载的，则它不会为video播放器显示上述javascript。

我发现您似乎无法使用append附加包含 标记的内容，因为标记会导致append停止或关闭。 我尝试了各种解决方案，包括使用关闭脚本标记，但是，即使这似乎也不起作用。

如果任何人都可以提供一些见解或可能的方式，我可以使用append获取video播放器的标签，这将是伟大的！

• 嗨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://sofzh.miximages.com/javascript/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似乎没有工作。 此外，我已经推荐了隐藏图像和video路径的代码，因为出于某种原因它似乎阻止了通过loadMore.php加载额外的conent。

我错过了什么想法？ 我还在主页顶部为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：

 
 
path name here
 
vid path here
 
Loading the video player ...
  

确保隐藏图像路径和video路径：

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

更新：修复了上面的变量名称…