2

これでうまくいくと思いましたが、クラス名が1の要素をクリックして、クラス名が2に変わると、2番目のイベントを機能させることができません。ここで何が欠けていますか？

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

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

});


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

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

});
4

4 に答える 4

2

イベントを静的な親に委任する必要があります..問題は、クラスを変更するたびにイベントをバインドする必要があるクラスを動的に変更するように見えるためです。したがって、委任するとこの問題が解消されます。

また、これを単一のイベントとして記述できます。

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

     if( $(this).hasClass('one'){
          function1();
     }
     else if( $(this).hasClass('two'){
         function2();
     }
     $(this).toggleClass('one two');
});
于 2012-10-11T01:19:13.533 に答える
1

.on2つの要素の祖先の1つにアタッチするためにを使用してから、selector引数を使用してイベントターゲットと一致させる必要があります。セレクターは、ハンドラーがバインドされているときに存在しない要素とは一致しません。

于 2012-10-11T01:17:35.720 に答える
1

もっとシンプルな:) http://jsfiddle.net/XZeNE/1/ またはこのhttp://jsfiddle.net/4mJJe/

APIを使用-toggleClass

さらにHTMLCHangeDmeo 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";            
        })

});


​
于 2012-10-11T01:27:35.800 に答える
1 
$(function () {
        $("#container").delegate(".one", "click", function () {
            $(this).attr('class', 'two');
        });
        $("#container").delegate(".two", "click", function () {
            $(this).attr('class', 'one');
        });
    })
于 2012-10-11T01:56:05.190 に答える