ホームページ > ウェブフロントエンド > jsチュートリアル > jqueryのクリックイベントを使用して追加されたHTMLコードが無効です

jqueryのクリックイベントを使用して追加されたHTMLコードが無効です

hzc
リリース: 2020-07-02 09:21:27
転載
2769 人が閲覧しました

動的に追加されたコンテンツにはクリック ボタンが含まれていますが、jquery のクリックではトリガーできません

$('#addone').click(function () {

var appendStr=
" </p>\n" +
" <p class=\"layui-col-md4\" >\n" +
" <p class=\"layui-btn-container\" style=\"margin-left: 20px\">\n" +
" <button class=\"layui-btn layui-btn-sm deleteone\">\n" +
" <i class=\"layui-icon\">&#xe640;</i>\n" +
" </button>\n" +
" </p>\n" +
" </p>\n" +
" </p>";

$("#firstone").append(appendStr)


});

$("#firstone").on("click",".deleteone",function () {
alert(1234)
$(this).closest(".layui-row").remove();

})
ログイン後にコピー

たとえば、ID addone のボタンを介して id に # 動的に追加されます。 ##firstone の p の deleteoneclass のボタンを含む p を追加します。このボタンをクリックするとイベントがトリガーされますが、

$('.deleteone ').click(function () {
})
ログイン後にコピー
## であることがわかりました。 # 何も反応しませんでした

要素の指定されたコンテンツにクリック イベントをアタッチすることで、jquery の on イベントを使用する必要があります

$("#firstone").on("click",".deleteone",function () {
alert(1234)
$(this).closest(".layui-row").remove();

})
ログイン後にコピー

推奨チュートリアル: 「

JS チュートリアル#」 ##"

以上がjqueryのクリックイベントを使用して追加されたHTMLコードが無効ですの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:jianshu.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート