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（）的唯一方法就是如果你计划完全abbandonning mb_miniPlayer并编写自己的javascript。那么肯定的是，你可以采用＆＃34;歌曲播放器的所有功能＆＃34; （例如：开始，停止，暂停）远离特定元素并将它们移动到页面上的持久性内容。

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

$('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（）并不是有些人似乎认为的万灵药。它并没有神奇地使页面更加生动＆＃34;。它所做的是将事件处理从可能是瞬态的事物（如我们可以动态生成的链接）转移到更永久的事物（身体是一个非常安全的目标）。

这里的问题是你无限滚动，如果你运行你的javascript（实例化玩家的那部分）页面上没有东西，那么他们就不能很好地了解＃34;激活＆＃34 ;.并且不使用.live（）。delegate（）或.on（）可以将它们带回来。

你可以做的是，找到一种方法来勾结有问题的javascript并让它做你需要的东西，即实例化新装载的玩家。 您使用的是什么插件？我或许可以提供一种方法来加入它。

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

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

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

这里的想法是搜索新内容以获取新的音频播放器并激活它们。由于playNext（）是在同一个函数中定义的，因此使用它作为你的＆＃39; onEnd＆＃39;应该工作正常。

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

1 个答案: