0

私のサイトは、各ページに24のシングルソングプレーヤーがある音楽サイトです。問題は、プレーヤーが新しくロードされたページにロードされていないことです。

私は自分のWebサイトで無限スクロールを使用していますが、無限スクロールコードを処理するためのコールバックを取得できないため、調査した結果から、.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>
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!');
});

jsフィドル

ここで行ったことは、イベント ハンドラーを<a>それ自体から に移動したこと<body>です。.on() の 2 番目の引数は、フィルタリングするオプションのセレクターです。この場合、 で発生したすべてのクリックのうち、 から発生した<body>ものだけに関心があり<a class="otherLink">ます。

残念ながら、これはあなたの問題にはほとんど役に立ちません。.live() は、一部の人が考える万能薬ではありません。魔法のようにページを「よりライブ」にするわけではありません。それが行うことは、イベント処理を一時的なもの (動的に生成できるリンクなど) からより永続的なもの (ボディはかなり安全なターゲット) に移動することです。

ここでの問題は、無限スクローラーです。javascript (プレーヤーをインスタンス化する部分) を実行したときにページに何かが存在しない場合、それらを「アクティブ化」することはできません。.live() .delegate() OR .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 に答える