同じボタンで2つの異なるビヘイビアを実現する方法

Question

ボタンの識別子を変更するクリックイベントを作成しました。同じボタンで2回目のクリックイベントを作成しましたが、今回は新しいIDで作成しました。ボタンをクリックすると、もう一度。私はいつも古いイドと最初の行動をしています。この例をよりよく説明するためのコードを以下に示します。

$(document).on('click', '#button', function() { 
 
    $(this).attr('id', 'buttonBis'); 
 
}); 
 

 
$(document).on('click', '#buttonBis', function() { 
 
    alert('here'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="button">Click me twice to see the alert()</button>

：アイデアは、あなたが動的に、あなたが委任されたイベントハンドラを使用する必要があります識別子を変更している場合は、同じボタン

$('#button').on('click',function() { 
    $(this).attr('id','buttonBis'); 
}); 

$('#buttonBis').on('click',function() { 
    alert('here'); 
}); 

Answer 1

を持つ2つの異なる動作を行うことですidの属性を動的に変更することは非常に良い考えではなく、可能な場合は避けるべきです。クラスを追加/削除するほうがはるかに良い選択肢になると思います。

Answer 2

$('#button').on('click',function() { 
 
    $(this).attr('id','buttonBis'); 
 
    //clone the node then reissign to the same node 
 
    // which removes the previous attached events 
 
    var self = this.cloneNode(true); 
 
    $(this).replaceWith(self); 
 
    newevent(); 
 
}); 
 

 

 
var newevent = function() { 
 
\t $('#buttonBis').on('click',function() { 
 
     alert('here'); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="button" >Click Me twice </button>