ホームページ > 記事 > ウェブフロントエンド > js/jqで動的に読み込まれる要素が監視できない問題の解決方法
js/jqで動的に読み込まれる要素が監視できない問題の解決方法
- php是最好的语言オリジナル
- 2018-07-23 12:02:502762ブラウズ
この記事では、js/jq によって動的に追加された要素がバインディング イベントをトリガーできない問題の解決策を紹介します。jquery のバージョンが 1.3 ～ 1.8 の場合、js/jq によって動的に追加された要素の解決策はバインディング イベントをトリガーできます。
あなたのバージョンを見て答えを見つけてください:
jquery1.6 以下のバージョンはデリゲート イベントをサポートしません
jquery1.3 から jQuery1.8 のバージョンはすべてライブ デリゲート イベントをサポートします
jquery1。 9 以降のバージョン live delegate イベントはサポートされていませんが、on イベントは 1.3 未満の live
jquery バージョン (jquery 1.3 を除く) を置き換えることができます。jquery バージョンを更新する時期が来ました。 なぜなら 解決策はありません、解決策はありません、解決策はありません、解決策はありません、解決策はありません
jquery バージョンが 1.3 ～ 1.8 の場合、バインディング イベントをトリガーするための js/jq の要素が動的に追加されるための解決策(on イベントの使用は推奨されません。バージョン 1.6 未満では on イベントがサポートされていないため、エラーが報告されます)
click例子
$('element').live('click',function(){})
element可以是动态生成的元素，可以是它的类或者idjquery バージョンが 1.9 以降の場合、ライブデリゲートイベントは削除され、on を通じて実装されます。 。バインディング イベントをトリガーするために js/jq に要素を動的に追加するための解決策
注意: ページに jq の低バージョン (1.3-1.8) と jq の高バージョン (jquery1.9 以降) の両方がある場合、ライブ デリゲート イベント 最終的には、jquery バージョンが 1.3 ～ 1.8 であっても、ライブ イベントを使用するとページでエラーが報告されます。
click例子 $('父元素').on('click', '子元素', function(){})
この時点で動的にロードされる要素は $('parent element') 内にある必要があります。そうでない場合、バインディング イベントは無効になります。つまり、A 要素はバインドされる必要がありますが、A 要素は動的に生成されるため、jq は A 要素の親要素を取得して、A 要素でクリック イベントが発生するかどうかを監視する必要があります。これにより、動的にロードされた要素を監視できないという問題を完全に解決できます。たとえば
<!DOCTYPE html> <html> <head> <title>js/jq 动态添加的元素不能触发绑定事件解决方案</title> </head> <script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script><body> <button>添加a标签</button> <p class="a-Box"> <a href="javascript:;" class="alt">My name is</a><br> </p> </body> </html> <script type="text/javascript"> $('.a-Box').on('click', 'a', function(){ alert('Jachin'); }) $('button').click(function(){ $('p').append('<a href="javascript:;" class="alt">My name is</a><br>'); }) </script>
最後にjqueryのバージョンが添付されました<script src="https://cdn.bootcss.com/jquery/1.2.3/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/1.2.6/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/1.3.0/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/1.4.0/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/1.5.1/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/1.6.1/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/1.7/jquery.min.js"></script> <script src="https://cdn.bootcss.com/jquery/1.8.0/jquery-1.8.0.js"></script> <script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/1.10.0/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/1.12.0/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
以上がjs/jqで動的に読み込まれる要素が監視できない問題の解決方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。