如何将 .live 添加到此代码中？

Question

我的网站是一个音乐网站，每个页面上有 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 示例：

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

Answer 1

任何事件委托 .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

我们所做的是将事件处理程序从 本身移动到 。 .on() 的第二个参数是用于过滤的可选选择器。在本例中，在 上发生的所有点击中，我们只对源自 的点击感兴趣。

不幸的是，这对您的问题帮助不大。 .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”应该可以正常工作。