0

これはオーディオ プレーヤーです。アイデアは、再生ボタンをクリックすると一時停止ボタンに変わる(またはその逆) というものです。

問題は、.pauseイベントが次の機能をトリガーしないことです。

$('.pause').click(function(){
    player.pause();

    $(this).addClass('play');
    $(this).removeClass('pause');
});

css は、一時停止クラスが設定されていることを示していますが、関数は機能しません。それを機能させる方法はありますか？（なぜうまくいかなかったのかを知ることは素晴らしいことです）

jsフィドル

4

3 に答える 3

1

委任されたイベント バインディングを使用して、イベントの再バインドを必要とせずにセレクターを認識するハンドラーをバインドします。

デモの目的のために、セレクターは次のようになります。

$('.player_controls').on('click', '.pause', function () {...});

デリゲート イベント バインディングは、リスナーを親要素にアタッチします。親要素は、発生したイベントが、指定されたセレクターに一致する要素で発生したかどうかを確認します。

jQuery ドキュメント

が指定されている場合selector、イベント ハンドラーはdelegatedと呼ばれます。イベントがバインドされた要素で直接発生した場合、ハンドラーは呼び出されませんが、セレクターに一致する子孫 (内部要素) に対してのみ呼び出されます。jQuery は、イベント ターゲットからハンドラーがアタッチされている要素 (つまり、最も内側の要素から最も外側の要素) までイベントをバブルし、セレクターに一致するそのパスに沿ったすべての要素に対してハンドラーを実行します。

イベント ハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードが を呼び出す時点でページに存在している必要があります.on()。要素が存在し、選択できることを確認するには、ページの HTML マークアップにある要素のドキュメント対応ハンドラー内でイベント バインディングを実行します。新しい HTML がページに挿入されている場合は、要素を選択し、新しい HTML がページに配置された後にイベント ハンドラーを添付します。または、次に説明するように、委任されたイベントを使用してイベント ハンドラーをアタッチします。

委任されたイベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。委任されたイベント ハンドラーがアタッチされたときに存在することが保証されている要素を選択することで、委任されたイベントを使用して、イベント ハンドラーを頻繁にアタッチおよび削除する必要がなくなります。この要素は、たとえば、Model-View-Controller デザインのビューのコンテナー要素である可能性があります。またはdocument、イベント ハンドラーがドキュメント内のすべてのバブリング イベントを監視する必要がある場合です。このdocument要素はhead、他の HTML をロードする前にドキュメントの で使用できるため、ドキュメントの準備が整うのを待たずに、そこにイベントを添付しても安全です。

于 2013-09-03T01:37:27.450 に答える
0

これにはイベント委任を使用できます。問題は、(委譲なしで) 直接バインドすると、click呼び出された時点で存在する要素にバインドされることです。 

$(".player_controls").on("click", ".pause", function(){

    /* ... */

});
于 2013-09-03T01:36:43.103 に答える
-2

$('.pause').click(function(){...}) を使用する代わりに、$.on メソッドを使用して、まだ DOM にないオブジェクトのリッスンを開始する必要があります。例えば

$(".pause").parent().on("click",".pause", function(event){
    player.pause();
    $(this).addClass('play');
    $(this).removeClass('pause');
});
于 2013-09-03T01:37:31.260 に答える