DOM要素にclickなどのイベントをバインドする際に無効になる問題の解決方法

以前からjsプラグインが生成する要素でclickイベントが無効になる問題に直面していましたが、再びバインドしても無理で、ついに解決策を見つけました。ここに記録します。

同時にJavaScriptのイベント処理メカニズムに対する理解を深めます。

1. イベントがアンブインドされました

この場合、clickイベントが無効になることはあまりないですが、以下の状況ではclickイベントが無効になります：

$(function(){
 $('.btn').unbind()
})
$('.btn').click(function(){
 //...
 })

所以，clickイベントには良い習慣が必要です：

$(function(){
 $('.btn').click(function(){
 //...
 })
}) 

2. jsプラグインの非同期／動的DOMロード

一般含有等待时间／开始运行时间：WaitTime

此时直接绑定／监听无效：

$(function(){
 $('.container .btn').on('click',function(){
 //...
 })
}) 

解決策1：

$(function(){
 setTimeout(function{ 
 $('.container .btn').click(function(){}
  //...
  })
 //.btn ロード後のイベント 
 },WaitTime) 
}) 

解決策2(イベントデリゲート、親要素に委託)：

$(function(){
 $('.container').on('click','.btn',function(){
 //...
 })
}) 

3. ajax 非同期ロードのDOM

• done()関数の体にclickイベントを追加することができます。
• 同2の中のイベントデリゲートメソッド。

4. リンクをクリックしても反応しません

以下のコードはaタグにhrefが設定されていてもジャンプできない場合があります。

$(function(){
 $('a').on('click',function(e){
 e.preventDefault()
 //...
 })
}) 

解決策：

$(function(){
 $('a').on('click',function(e){
 e.preventDefault()
 //...
 })
 $('a').unbind()
})

まとめ

1.イベントバインド、イベントリスナー、イベントデリゲートの関連リンク

2.イベントキャプチャとバブルの関連リンク

 target.addEventListener(type, listener[, options]);
 target.addEventListener(type, listener[, useCapture]);

イベントキャプチャ

親要素が最初に発生し、子要素が後に発生します

イベントバブル

子要素が最初に発生し、親要素が後に発生します

3.javascript 実行順序

これで本文のすべての内容が終わります。本文の内容が皆様の学習や仕事に役立つことを願っています。また、ナイアラチュートリアルのサポートを多くお願いします。

声明：本文の内容はインターネットから収集され、著作権者に帰属します。インターネットユーザーが自発的に貢献し、自己でアップロードしたものであり、本サイトは所有権を持ちません。人工的な編集は行われていません。また、関連する法的責任を負いません。著作権侵害を疑う内容がある場合は、メールを送信して：notice#oldtoolbag.com（メールを送信する際には、#を@に置き換えてください。報告を行い、関連する証拠を提供してください。一旦確認が取れましたら、本サイトは即座に侵害疑いのコンテンツを削除します。）