切换类是否有事件功能?

时间:2012-10-11 01:14:14

标签: javascript jquery html css

我认为这样可行,但每当我点击类名为1的元素并且它更改为名为two的类时,我就无法使第二个事件起作用。我在这里缺少什么?

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

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

});


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

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

});

4 个答案:

答案 0 :(得分:2)

您需要将事件委托给静态父。 问题是,因为你似乎动态地改变了类,你需要在每次更改类时绑定事件。所以委托它应该删除这个问题..

此外,您可以将其写为单个事件..

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

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

答案 1 :(得分:1)

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

答案 2 :(得分:1)

为什么不简单:) http://jsfiddle.net/XZeNE/1/ http://jsfiddle.net/4mJJe/

使用API​​ - toggleClass

进一步HTML CHange 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";            
        })

});


​

答案 3 :(得分:1)

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