javascript - 切换类使事件功能无效？

Question

我认为这会起作用，但是每当我单击类名为 one 的元素并将其更改为名为 two 的类时，我就无法使第二个事件起作用。我在这里想念什么？

//first event
$('.one').on('click', function () {

  $('.one').attr('class', 'two');

});


//second event
$('.two').on('click', function () {

  $('.two').attr('class', 'one');

});

Answer 1

您需要将事件委托给静态父级..问题是，因为您似乎动态更改了每次更改类时都需要绑定事件的类..所以委托它应该可以消除这个问题..

你也可以把它写成一个单一的事件..

$('body').on('click','.one' , '.two', function() {

     if( $(this).hasClass('one'){
          function1();
     }
     else if( $(this).hasClass('two'){
         function2();
     }
     $(this).toggleClass('one two');
});

Answer 2

为什么不更简单的:) http://jsfiddle.net/XZeNE/1/ 或这个http://jsfiddle.net/4mJJe/

使用 API -toggleClass

进一步的 HTML 更改Dmeo http://jsfiddle.net/vuLQK/1/

代码

$('.one').on('click', function() {

    $(this).toggleClass('two');

});​

HTML 更改

$('.one').on('click', function() {
    $(this).toggleClass(function(){
           if($(this).hasClass('two'))
               $(this).html('NOw its class two HTML HULK');
           else                 
              $(this).html('CLASS ONE HTML IRONMAN' );

             return "two";            
        })

});


​

Answer 3

您应该使用.on附加到 2 个元素的祖先之一，然后使用选择器参数来匹配事件目标。选择器不会匹配绑定处理程序时不存在的元素。

Answer 4

$(function () {
        $("#container").delegate(".one", "click", function () {
            $(this).attr('class', 'two');
        });
        $("#container").delegate(".two", "click", function () {
            $(this).attr('class', 'one');
        });
    })