js/jqで動的に読み込まれる要素が監視できない問題の解決方法-jsチュートリアル-php.cn

js/jqで動的に読み込まれる要素が監視できない問題の解決方法

php是最好的语言

リリース： 2018-07-23 12:02:50

オリジナル

2737 人が閲覧しました

この記事では、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例子
$(&#39;element&#39;).live(&#39;click&#39;,function(){})
element可以是动态生成的元素，可以是它的类或者id

ログイン後にコピー

jquery バージョンが 1.9 以降の場合、ライブデリゲートイベントは削除され、on を通じて実装されます。。バインディングイベントをトリガーするために js/jq に要素を動的に追加するための解決策

注意: ページに jq の低バージョン (1.3-1.8) と jq の高バージョン (jquery1.9 以降) の両方がある場合、ライブデリゲートイベント最終的には、jquery バージョンが 1.3 ～ 1.8 であっても、ライブイベントを使用するとページでエラーが報告されます。
click例子
$(&#39;父元素&#39;).on(&#39;click&#39;, &#39;子元素&#39;, 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">
    $(&#39;.a-Box&#39;).on(&#39;click&#39;, &#39;a&#39;, function(){
        alert(&#39;Jachin&#39;);
    })
    $(&#39;button&#39;).click(function(){
        $(&#39;p&#39;).append(&#39;<a href="javascript:;" class="alt">My name is</a><br>&#39;);
    })
</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 サイトの他の関連記事を参照してください。