Question

我试图回答这个问题：Find specific anchor tag and replace data atribute on click我创建了this 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中的一个错误？还有别的吗？

Answer 1

因为你的元素在绑定处理程序时不在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");
});

Answer 2

如果要动态更改元素

，则需要使用委托

$('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(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

它显示了对文档的绑定，因为它的实际工作方式 - 但最好将处理程序绑定到选择器的静态父元素

您可以在jQuery .on() documentation

中阅读更多相关信息

jquery基于动态添加的属性选择元素

2 个答案: