添加新类后选择元素不起作用

Question

我有一个只会被点击一次的链接。所以我在链接中添加一个类来验证它是否被点击并防止用户再次点击它。

<a href="#" id="plus">my link</a>

$("a#plus[class!='clicked']").on('click',function(e){
    e.preventDefault();
    alert('clicked');
    $(this).addClass('clicked');
});

所以点击链接后，一个“点击”类将被添加到链接中，如果用户再次点击，这应该会发生

$("a#plus.clicked").on('click',function(e){
    e.preventDefault();
    alert('clicked before');
});

但结果是执行第一个代码块，尽管已在此处添加了“单击的类”的 jsfiddle http://jsfiddle.net/gkwym8nr/

Answer 1

您的处理程序被附加到在调用on() 时匹配的元素。稍后添加/删除类不会移动或替换处理程序。您需要使用事件委托来根据当前匹配的元素捕获事件。

$(document.body).on('click', "a#plus[class!='clicked']", function(e) {
  e.preventDefault();
  $("span.result").text('link clicked');
  $(this).addClass('clicked');
});

$(document.body).on('click', "a#plus.clicked", function(e) {
  e.preventDefault();
  $("span.result").text(' ');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<a href="#" id="plus">link</a>
<span class="result"></span>