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

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');
});

但是结果是执行了第一个代码块，虽然已经在这里添加了'clicked'这个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>