click event on a html inserted by append method

Question

When I try to use a html content inserted dynamically by append(htmlString) method in a page, the click event is not trigged. When I try to use the same html content normally, the click event is trigged.

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

});

Is it possible to trigger the click event on a html inserted by the append method?

Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Jared Smith, Mar 28 '18 at 12:01
do you have any console output? and can you add your html please? — George, Mar 28 '18 at 12:05
I will edit the code to correct the syntax. But, no error outputs in console. — Wesin Alves, Mar 28 '18 at 12:57
Possible duplicate of [Jquery click event not working after append method](https://stackoverflow.com/questions/15420558/jquery-click-event-not-working-after-append-method) — Ritul Lakhtariya, Mar 28 '18 at 13:06

score 3 · Accepted Answer · answered Mar 28 '18 at 12:05

3

You can do like this also,

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

answered Mar 28 '18 at 12:05

Mohammad Raheem

1,131
1
13
23

score 2 · Answer 2 · answered Mar 28 '18 at 12:01

2

You have to use event delegation.

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

answered Mar 28 '18 at 12:01

giggi__

1,793
1
11
12

1

When you Append anything dynamically , then you have to trigger event within given Scope, either you can use document, body or any high level dom element – Mohammad Raheem Mar 28 '18 at 12:04

score -1 · Answer 3 · answered Mar 28 '18 at 12:36

-1

The syntax for click event seems to be incorrect. You need to swap click keyword with that of on. The correct syntax should look like the one as below:

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

answered Mar 28 '18 at 12:36

Shashank

2,010
2
18
38

Syntax is correct, your event is depend on dom element whether it is there or not at the time of event firing, best is always append with your scope – Mohammad Raheem Mar 28 '18 at 13:10

click event on a html inserted by append method

3 Answers3