The appended html code using jquery's click event is invalid

The dynamically added content contains click buttons, but jquery click cannot trigger

$('#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();

})

For example, through a button with the id addone to id is # Dynamically add a p containing a button with class to deleteone in the p of ##firstone. Clicking this button can trigger the event, but I found that

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

did not Any reaction

now needs to use the on event of jquery, by attaching the click event to the specified content in the element

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

})

Recommended tutorial: "

JS Tutorial"

The above is the detailed content of The appended html code using jquery's click event is invalid. For more information, please follow other related articles on the PHP Chinese website!