Problems with events in dynamically created elements

Question

Problems with events in dynamically created elements

Navigation

#1 by (8 votes)

5

My intention is:

A listing where you can add <div> and delete the divs added with a "button" inserted in each div .

The page already comes with a fixed% inserted divs that are the same as those that will be added.

The question is, in divs that are already on the page, the delete button works correctly, now the divs that are inserted with prepend are not deleted. I already checked the remove() function and all divs both fixed and added have the same class. Anyway ...

list-mode is the div that encompasses all these divs in html, .img_des_row is div that must be repeated and deleted ... Remember: add is working correctly!

JavaScript:

$("#bt-adicionar-imagens").click(function() {
    $(".list-mode").prepend("< div class='img_des_row col-xs-12'>< div class='col-xs-8 no-pad-left'>< div class='description_img'>Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do elusmod tempor.< /div>< /div>< div class='col-xs-2'><div class='pull-right margin-top_20 dropdown'><a href='#' class='icon-dwn-med pull-left margin_l_r_5'>< /a>< a href='#' class='icon-edit-med pull-left margin_l_r_5 dropdown-toggle' data-toggle='dropdown'>< /a>< div class='dropdown-menu alt-color-scheme left pad'>< /div>< a href='#' class='icon-trash-med pull-left margin_l_r_5'>< /a>< /div>< /div>< /div>");
});

$('.img_des_row .icon-trash-med').on('click', function(e) {
    $(this).closest(".img_des_row").remove();
});

javascript jquery

asked by anonymous 16.07.2014 / 03:58

1 answer

Why is the image distorted (does not maintain proportions) in ImageView? Infinite object?

score 8 · Accepted Answer

This is if I understand what you want. Your code has the following problems:

Your selector for the on() event is not ready to work with dynamic elements;
Your code html , is with some problems, type has a spaces before the div , type this: < div>< /div> , and the correct one would be <div></div> (maybe this is not a problem in your environment, but here for me in Chrome, this was not interpreted as html but with text );

Then I solved the problem of selector of event on() , for dynamic elements like this:

$('.list-mode').on('click', '.img_des_row .icon-trash-med', function(e) {
    $(this).closest(".img_des_row").remove();
});

What happens and that the on() method works as follows to capture dynamically created elements:

I'll try to explain in parts:

// o seletor onde o 'on()' é aplicado deve ser um elemento estático, que já exista
// quando a associação do evento seja executado, no caso a 'div' ('.list-mode') 
// onde os elementos dinâmicos serão inseridos.
$('.list-mode')

// o primeiro parâmetro é o evento, no caso o 'click'
// o segundo é o seletor "dinâmico", no caso '.img_des_row .icon-trash-med'
// (eu penso assim: esse seletor secundário será executado a cada evento (no caso click) no seletor (principal('.list-mode')) onde o 'on()' foi aplicado)
// e por ultimo a função de callback do evento (o handler)
.on('click', '.img_des_row .icon-trash-med', function(){...});

I do not know if my explanation was clear, any doubts about the on() method you can refer to in the method documentation on() .

And to be easy to understand I created a example of the working solution

And if that was not quite what you needed, comment.