类更改后的click（）

Question

我有以下代码：

$(document).ready(function(){
    $('.notUsed').click(function(){
        $(this).attr('class', 'used');
    });
});

$(document).ready(function(){
    $('.used').click(function(){
        alert("Are you sure you want to do this?");
    });
});


<div class="notUsed"></div>

在我第一次单击div之后，一切都正常，线条也随之改变。 但是，当我第二次单击它时，第二个事件将不会触发。 我究竟做错了什么？

Answer 1

这个语法：
$('.used').click(function(){
将所有当前元素绑定为类名“ used”。 由于使用的类是在最初加载文档后添加的，因此您需要动态绑定它：
$(document).click('.used',function(){
如果可能，应将.used的父.used用作选择器而不是文档。

Answer 2

事件处理程序在运行时绑定-因此，当您的类更改时，第二个处理程序仍然不知道该元素。 您可以在更改类时绑定第二个处理程序，也可以使用事件委托。 此外，您只需要1个DOM ready事件：

$(document).ready(function(){
    $('.notUsed').click(function(){
        $(this).addClass('used').removeClass('notUsed');
        $(this).off("click"); //unbind this handler

        $('.used').click(function(){
            alert("Are you sure you want to do this?");
        });
    });
});

Answer 3

因为当您运行$('.used').click(function(){时没有元素， .used它永远不会绑定$('.used').click(function(){

$(document).ready(function(){
    $('.notUsed').live('click', function(){
        $(this).attr('class', 'used');
    });

    $('.used').live('click', function(){
        alert("Are you sure you want to do this?");
    });
});


<div class="notUsed"></div>

Answer 4

您需要使用委派使事件起作用：

$(document).ready(function () {
    $('.not-used').on("click", function () {
        $(this).removeClass('not-used').addClass('used');
    });

    $(document).on('click', '.used', function () {
        alert("Are you sure you want to do this?");
    });
});

Answer 5

您在回调中在那里有元素，为什么不将新的EventListener绑定到该元素

$(document).ready(function () {
  $('.not-used').on("click.first", function () {
    $(this)
      .removeClass('not-used')
      .addClass('used')
      .off('click.first')
      .on('click.second', function(){
        alert("Are you sure you want to do this?");
    });
  });
});

Answer 6

我想你可以用

<div class="element used"></div>

处理点击

$(".element").on("click",function(){
     this.classList.toggle("used");
     this.classList.toggle("notUsed");
});

只需处理事件1次。

希望对你有帮助