使用append方法插入的HTML元素如何绑定点击事件？

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()

});

在使用append方法插入的HTML元素上，是否有可能触发click事件？

- Wesin Alves

---

打开开关并点击。 - George

可能是动态创建元素的事件绑定重复问题？的重复问题。 - Jared Smith

事件看起来是否包含'on'？ - George

你有任何控制台输出吗？能否添加你的HTML代码？ - George

我将编辑代码以更正语法。但是，控制台没有错误输出。 - Wesin Alves

可能是Jquery append方法后点击事件无效的重复问题。 - Ritul Lakhtariya

Answer 1

您也可以这样做，

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

- Mohammad Raheem

Answer 2

你需要使用事件委托。

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

- giggi__

---

当您动态添加任何内容时，您必须在给定的范围内触发事件，可以使用document、body或任何高级DOM元素。 - Mohammad Raheem

Answer 3

点击事件的语法似乎不正确。您需要使用 on 关键字替换 click 关键字。正确的语法应该像下面这样：

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

- Shashank

---

语法正确，您的事件取决于DOM元素是否在事件触发时存在，最好始终将其附加到您的作用域。 - Mohammad Raheem