0

我的网站是一个音乐网站，每页有 24 个单曲播放器。问题是播放器没有在新加载的页面上加载。

我在我的网站上使用无限滚动，我无法获得回调来处理我的无限滚动代码，所以根据我的研究，.live 是下一步要采取的措施。

不幸的是，我不知道如何在我的代码中实现 .live。我不确定它是否适用于这种情况。

有没有人有任何相关的例子，甚至可以帮助解决这种情况。

音频播放器代码如下：

    //Audio jquery

    $(function(){

    $(".audio").mb_miniPlayer({
    width:210,
    height:34,
    inLine:false,
    onEnd:playNext
    });

    var $audios = $('.audio');

    function playNext(idx) {
    var actualPlayer=$audios.eq(idx),
    $filteredAtoms = $container.data('isotope').$filteredAtoms,
    isotopeItemParent = actualPlayer.parents('.isotope-item'),
    isoIndex = $filteredAtoms.index( isotopeItemParent[0] ),
    nextIndex = ( isoIndex + 1 ) % $filteredAtoms.length;

    $filteredAtoms.eq( nextIndex ).find('.audio').mb_miniPlayer_play();
    };  
    });

不确定这是否需要，但这里是无限滚动代码：

  //Inifinite Scroll

  var $container = $('#container');

  $container.isotope({
    itemSelector : '.square'
  });

  $container.infinitescroll({
    navSelector  : '#page_nav',    // selector for the paged navigation 
    nextSelector : '#page_nav a',  // selector for the NEXT link (to page 2)
    itemSelector : '.square',     // selector for all items you'll retrieve
    loading: {
        finishedMsg: 'No more pages to load.',
        img: 'http://i.imgur.com/qkKy8.gif'
      }
    },

  // call Isotope as a callback
      function( newElements ) {
      var $newElements = $(newElements);

  // add hover events for new items
      bindSquareEvents( $newElements );
      setTimeout(function() {
      $container.isotope('insert', $newElements );
      }, 1000);
      });

分区示例：

<div class="square pop">
 <!-- DJ Picture -->
<img src="Pictures/adrianlux.jpg" class="img1" />
        <div class="boxtop">
        <span class="genre">Pop</span>
        </div>

        <div class="box">
        <a class="close" href="#close">&times;</a>
        <!-- DJ Name -->
        <h1>Adrian Lux</h1>

        <!-- Song Title -->
        <h2>Alive (Extended Mix)</h2>

         <!--Song Description(179 characters with spaces)-->
        <h4>Although this is not truly a pop song, I don't think it can be classified as anything else. The transition from spoken-word lyrics to rising vocals is wonderful as is the drop that follows.</h4> 

           <div class="buttons">
           <!--Song file info-->
            <div class="player">
            <a id="m75" class="audio {skin:'#010101',showVolumeLevel:false,showTime:false,showRew:false,ogg:'MP3/Adrian Lux feat. The Good Natured - Alive (Extended Mix).ogg'}" href="MP3/Adrian Lux feat. The Good Natured - Alive (Extended Mix).mp3"></a></div> 

                <!--Download Link-->
                <div class="download">
                <a href="MP3/Adrian Lux feat. The Good Natured - Alive (Extended Mix).mp3" title='Right Click and Save Link As'>
                <img src="img/dlicon.png"/></a>

                </div>
                </div>
        </div>
</div>
4

1 回答 1

0

任何事件委托 .on() .live() .delegate() 的唯一方法是如果您计划完全放弃 mb_miniPlayer 并编写自己的 JavaScript。那么可以肯定的是，您可以将“歌曲播放器”的所有功能（例如：开始、停止、暂停）从特定元素中移开，并将它们移到页面上永久存在的位置。

所有事件委托所做的就是移动控制。例如，绑定普通旧点击处理程序的替代方法如下：

$('a.mylink').on('click',function(){
    alert('I see you!');
});

但是可以通过以下方式实现相同的功能：

$('body').on('click','a.Otherlink',function(){
    alert('I see you too!');
});

jsFiddle

我们所做的是将事件处理程序从<a>自身移动到<body>. .on() 的第二个参数是用于过滤的可选选择器。在这种情况下，在发生在 上的所有点击中，<body>我们只对来自 的点击感兴趣<a class="otherLink">。

不幸的是，这对您的问题帮助不大。.live() 并不是某些人认为的万灵药。它不会神奇地使页面“更活跃”。它所做的是将事件处理从可能是暂时的（比如我们可以动态生成的链接）转移到更永久的（主体是一个非常安全的目标）。

这里的问题是你无限滚动，如果当你运行你的javascript（实例化播放器的部分）时页面上不存在某些东西，那么它们就不能很好地被“激活”。并且没有使用 .live() .delegate() 或 .on() 可以让他们回来。

您可以做的是找到一种方法来挂钩有问题的 javascript 并使其执行您需要的操作，即实例化您新加载的播放器。你用的是什么插件？我也许可以提供一种方法来吸引它。

编辑：如果无法测试您的页面，这将有点棘手，但看起来您的无限滚动插件提供了一个回调，该回调在每次加载新内容并且您已经在使用它时触发。这是完美的，我们在那里添加：

function( newElements ) {
    var $newElements = $(newElements);

    $newElements.find(".audio").mb_miniPlayer({
        width:210,
        height:34,
        inLine:false,
        onEnd:playNext
    });

这里的想法是搜索新音频播放器的新内容并激活它们。由于 playNext() 是在同一个函数中定义的，因此将其用作“onEnd”应该可以正常工作。

于 2012-01-19T02:27:11.247 回答