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

Question

我有一个 link，它只会被点击一次。所以我在 link 中添加了一个 class 来验证它是否被点击并防止用户再次点击它。

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

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

所以在点击 link 之后，一个 class 'clicked' 将被添加到 link 并且如果用户再次点击这应该发生

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

但结果是执行了第一块代码，尽管这里添加了 class 'clicked's 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>

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

selecting an element after adding a new class is not working

class

jquery-selectors