Question

当我尝试在页面中使用append(htmlString)方法动态插入的html内容时，不会触发click事件。当我尝试正常使用相同的html内容时，会触发click事件。

$('#slc_field').change(function(event){
    $('#add_fields').removeClass("d-none");
    remove_link = "<a href='#' id="+this.value+" class='del_field text-danger' title='Remover item'> (x)</a>";
    html_field = " <div class='form-group col-md-4'>" +
                   "<label for='level_systemx'>Sistema de arranjo "+ remove_link +" </label> " +
                   "<textarea class='form-control' id='level_systemx' name='level_systemx' cols='250' rows='5'></textarea>" +
                  "</div>"
    $('#form_fields').append(html_field)
});

$('.del_field').click(function(event){
    $(event.target.parentNode.parentNode).remove()

});

是否可以在click方法插入的html上触发append事件？

Answer 1

您必须使用event delegation。

$('body').click('on', '.del_field', function(event){
    $(event.target.parentNode.parentNode).remove()
});

Answer 2

你也可以这样做，

 $(document).on('click', '.del_field',function(event){
    $(event.target.parentNode.parentNode).remove();
});

Answer 3

click事件的语法似乎不正确。您需要将click关键字与on的关键字进行交换。正确的语法应如下所示：

$('.del_field').on('click', function (event) {
    $(event.target.parentNode.parentNode).remove()
});

通过追加方法

3 个答案: