1

私はこの質問に答えようとしていました:特定のアンカータグを見つけてクリック時にデータ属性を置き換え 、データ属性に基づいてアンカー要素を選択しようとするこのjsfiddleを作成しました。

特定のデータ属性に基づいて、このアンカーでイベントをトラップしたいと考えています。

<a href="#" class="article-play" data-play="4">click</a>

JS

//this event only fires if 'data-pause' is initially specified in the anchor element
$(".article-play[data-pause]").on("click", function() {
    $(this).removeAttr("data-pause");
    $(this).attr("data-play",4);

    $("#output").text("playing 4");
});

//this event only fires if 'data-play' is initially specified in the anchor element
$(".article-play[data-play]").on("click", function() {
    $(this).removeAttr("data-play");
    $(this).attr("data-pause",3);

    $("#output").text("pausing 3");
});

これは予想される動作ですか？jQueryのバグ？他の何か？

4

2 に答える 2

2

ハンドラーをバインドするときに要素が DOM にないため、イベントを委任する必要があります。

http://jsfiddle.net/BjkQT/8/

$(".article").on("click", ".article-play[data-pause]", function () {
    $(this).removeAttr("data-pause");
    $(this).attr("data-play", 4);

    $("#output").text("playing 4");
});

$(".article").on("click", ".article-play[data-play]", function () {
    $(this).removeAttr("data-play");
    $(this).attr("data-pause", 3);

    $("#output").text("pausing 3");
});
于 2013-06-05T15:06:31.223 に答える
1

要素を動的に変更する場合は、委任を使用する必要があります

$('parentelement').on('click','.article-play[data-pause]',function(){
    $(this).removeAttr("data-pause");
    $(this).attr("data-play",4);

    $("#output").text("playing 4");
});

$('parentelement').on('click','.article-play[data-play]',function(){
    $(this).removeAttr("data-play");
    $(this).attr("data-pause",3);

    $("#output").text("pausing 3");
});

jQuery live は.live()の置き換えを文書化します

$(selector).live(イベント、データ、ハンドラー); // jQuery 1.3+
$(document).delegate(セレクター、イベント、データ、ハンドラー); // jQuery 1.4.3+
$(document).on(イベント、セレクター、データ、ハンドラー); // jQuery 1.7+

ドキュメントへのバインドがライブの仕組みとして示されていますが、ハンドラーをセレクターの静的な親要素にバインドすることをお勧めします

詳細については、jQuery .on() ドキュメントを参照してください。

于 2013-06-05T15:06:08.707 に答える