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

動的に追加されたコンテンツにはクリック ボタンが含まれていますが、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 の deleteone に class のボタンを含む p を追加します。このボタンをクリックするとイベントがトリガーされますが、

$('.deleteone ').click(function () {
}）

## であることがわかりました。 # 何も反応しませんでした

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

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

})

推奨チュートリアル: 「

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

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