类更改后无法与元素交互

Unable to interact with element after class change

本文关键字：元素 交互      更新时间：2023-09-26

我确定这是处理javascript时常见的问题，但我似乎找不到解决方案。

我试图在一张"卡片"上创建两个函数，但通过卡片状态的类来区分。

一个"启动"卡的函数和一个"移除"卡的函数。但是当我开始使用一张卡时，我不能用同样的功能删除它。

jsfiddle例子

<div class="card started">click to hide</div>
<div class="card not-started">click to start</div>

js 

$(".card.not-started").on("click", function () {
    $(this).removeClass("not-started").addClass("started").html("click to hide");
});
$('.card.started').on("click", function () {
    $(this).fadeOut();
});

http://jsfiddle.net/wm99z4sj/1/

$(document).on("click", ".card.not-started", function () {
    $(this).removeClass("not-started").addClass("started").html("click to     hide");
});
$(document).on("click",'.card.started', function () {
    $(this).fadeOut();
});

像这样试试。如果你使用文档作为父类，它将在运行时查找该类添加的元素。

稍微修改一下就可以解决这个问题。

$(".card").on("click", function () {
    var el = $(this);
    if (el.hasClass("not-started")){
        el.toggleClass("not-started started").html("click to hide");
    } else {
        el.fadeOut();
    }
});

这样你将总是委托一个点击处理程序在.card，但取决于你给它的类，它会改变功能。

如果你想保持两个独立的功能，你可以从$(document.body)或$(".card").parent()委派，如下所示:

var parent = $(".card").parent();
parent.on("click", ".not-started", function () {
    $(this).toggleClass("not-started started").html("click to hide");
});
parent.on("click", ".started", function(){
    $(this).fadeOut();
});

相关文章：