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

【问题标题】：How to add .live to this code?如何将 .live 添加到此代码中？
【发布时间】：2026-01-13 02:25:02
【问题描述】：

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

【问题讨论】：

不要使用.live()，使用.on()。如果 .on() 不可用（例如，当您使用 jQuery .delegate() 是可行的方法（它更有效，其语法鼓励更合理的用例）。总结一下：1）使用.on()，2）如果没有.on()，使用.delegate()，3）如果没有.delegate()，则使用.live()。
好的。我也在查看.on，但找不到太多关于如何在这种情况下实现它的信息。不过，我还没有研究过 .delegate 。我现在就这样做。
该评论在这种情况下根本没有帮助，任何形式的委派都无法帮助他。
@user1063192：它们非常相似，除了 .live() 已被弃用（或多或少）以支持.delegate() 和.delegate() 已被弃用以支持.on()。如果你有.on()，那么使用它，给出selector 参数（参见the documentation）。但要获得帮助，您可能需要更详细地解释您的网站是如何工作的。

标签： javascript jquery html ajax infinite-scroll

【解决方案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

我们所做的是将事件处理程序从<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”应该可以正常工作。

【讨论】：

如果你能帮助我，你会是我的救星。
对不起，我的意思是您使用的“无限滚动”插件是什么。这是这里的罪犯。音频播放器正在按照要求执行。
它说错误：我的 FF 控制台上没有定义 playNext
想通了。我将整个音频 jquery 添加到您刚刚回答的内容中。非常感谢你。在过去的两周里，我一直在做这件事。我很讨厌 javascript。我无法相信这一点。谢谢。
嘿Sintheta，我有一个问题要问你...我不确定这是否与我的音频代码或回调有关，但请您看一下... *.com/questions/8977541/…