Home >Web Front-end >JS Tutorial >The appended html code using jquery's click event is invalid

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

hzc
hzcforward
2020-07-02 09:21:272780browse

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!

Statement:
This article is reproduced at:jianshu.com. If there is any infringement, please contact admin@php.cn delete