Как добавить .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

Что мы сделали, так это переместили обработчик событий из самого <a> в <body>.Второй аргумент .on () - необязательный селектор для фильтрации.В этом случае из всех кликов, которые происходят на <body>, нас интересуют только те, которые произошли от <a class="otherLink">.

К сожалению, это мало поможет вашей проблеме..live () - это не лекарство от всего, что некоторые, кажется, думают.Это волшебным образом не делает страницу «более живой».Что он делает, так это перемещает обработку событий из чего-то, что может быть временным (например, ссылку, которую мы могли бы генерировать динамически), во что-то более постоянное (тело является довольно безопасной целью).

Проблема в том, что вы бесконечныскроллер, если что-то не существует на странице, когда вы запускаете свой javascript (часть, которая создает экземпляры игроков), тогда они не могут быть «активированы».И никакое использование .live () .delegate () ИЛИ .on () не может вернуть их.

Что вы можете сделать, так это найти способ подключиться к нарушающему JavaScript и заставить его делать то, что вам нужноэто, чтобы создать экземпляр ваших недавно загруженных игроков. Какой плагин вы используете?Возможно, я смогу предложить способ подключиться к нему.

РЕДАКТИРОВАТЬ: Это будет немного сложно без возможности проверить вашу страницу, но выглядит как ваша бесконечнаяПлагин -scroll обеспечивает обратный вызов, который срабатывает каждый раз, когда он загружает новый контент, и вы уже используете его.Это прекрасно, и мы добавляем туда:

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

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

Идея в том, чтобы искать в новом контенте новые аудиоплееры и активировать их.Поскольку playNext () была определена в той же функции, использование этого в качестве вашего 'onEnd' должно работать нормально.