jquery はボタンのインライン onclick イベントを削除します (テスト済みでブラウザーと互換性があります)

jquery はボタンのインライン onclick イベントを削除します (テスト済みでブラウザーと互換性があります)_jquery

WBOY

リリース： 2016-05-16 17:42:49

オリジナル

1096 人が閲覧しました

インライン onclick コードは次のとおりです:

コードをコピーコードは次のとおりです:

btnOKコードをクリック

コードをコピーコードは次のとおりです: function btnOKClick() {

alert("btnOK Clicked");

} 

ボタンをクリックした後、onclick イベントを削除し、新しいクリック イベントをボタンにバインドします。 2 回目のクリックで、2 番目のイベント処理関数の実行が開始されます。2 番目の処理関数のコード:

再クリックコード
:

コードをコピーしますコードは次のとおりです。 function reclick() {

alert('reclick')

} 
[sS ]*n 

Idea

: btnOKClick の onclick を削除し、新しいバインディングを追加します。コードは次のとおりです:

コードをコピーコードは次のとおりです: $('#btnOK').attr('onclick', '').bind(' click', function () { reclick() });

 
このコードを追加した後の btnOKClick メソッドは次のとおりです。 code
 

コードは次のとおりです。

function btnOKClick() { alert("btnOK Clicked"); $('#btnOK' ).attr('onclick' , '').bind('click', function () { reclick(); }); }

このメソッドは Google Chrome では正常に動作します。ただし、IE とは互換性がありません。 reclick メソッドはモードですぐに呼び出されますが、これは私たちが望む効果ではありません。

この効果の理由は、onclick が実行された後、IE が click にバインドされたハンドラーがあるかどうかを確認するために戻って、その構造が存在するため、すぐに実行されるようです。 

この問題を解決するには、アイデアを変更して、クリック イベントのバインドを遅らせることができます。具体的なコードは次のとおりです。 

コードをコピー

コードは次のとおりです。

function btnOKClick () { alert("btnOK クリックされました"); setTimeout(function () { $('#btnOK').attr('onclick', '').bind('click', function () { reclick () }); }, 1);

タイマーがトリガーされた後、onclick 属性が削除されます。そしてクリックはハンドラーコードにバインドされています。 
テスト後、IE9 の互換モードと非互換モードの両方で正常に実行できます。Google Chrome も正常に実行されます。 