javascript - 添加/删除类工作但点击新类不

Question

抱歉标题措辞不当!

我有 JS:

$(".add").click(function(event)
{
   cid=event.target.id; 
   alert("add class changed");
   $("#"+cid).addClass("del");
   $("#"+cid).removeClass("add"); 
});


$(".del").click(function(event)
{
   cid=event.target.id; 
   alert("del class changed");
   $("#"+cid).addClass("del");
   $("#"+cid).removeClass("add"); 
});

还有一些像这样的 html:

<a class="add" id="1" href="#">test a</a>
<a class="add" id="2" href="#">test b</a>
<a class="add" id="3" href="#">test c</a>

当我单击其中一个“测试”时，我收到“添加类已更改”警报，并且 HTML 显示它的类已更改为“del”。

但是，当我单击其中一个已更改的“测试”时，带有 del 类的函数不会运行，只是再次添加一个。

因此类正在相应地更改和显示，但是相应类的点击功能没有发生。谁能看出我哪里出错了？

编辑:需要一个“现场”事件。以下代码有效:

$(".add").live({
           click: function(event)
               {
                  cid=event.target.id; 
                  alert("add class changed");
                  $("#"+cid).addClass("del");
                  $("#"+cid).removeClass("add");
               }
               });

Answer 1

$(".add") 仅选择在那一刻具有add 类的元素。这并不意味着点击事件会在类发生变化时神奇地分配给其他元素。

不过，这可以通过使用 JQuery live 来实现绑定(bind)事件的方法。