5

Minha intenção é:

Uma listagem onde é possível adicionar <div> e apagar as divs adicionadas com um "botão" inserido em cada div.

A página já vem com umas divs inseridas fixas que são iguais as que serão adicionadas.

A questão é, nas divs que já estão na página, o botão de apaga-las funciona corretamente, agora as divs que são inseridas com prepend não são apagadas. Já chequei a função do remove() e todas as divs tanto as fixas quanto as adicionadas tem a mesma classe. Enfim...

list-mode é a div que engloba todas essas divs no html, .img_des_row é a div que deve ser repetida e apagada...Relembrando: a adição está funcionando corretamente!

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();
});
2
  • Se puder criar um jsFiddle (e postar também seu html aqui na pergunta), com uma representação de seu problema real, com o seu html e seu JS, para podermos tentar lhe ajudar, e também sua pergunta é pouco confusa, tente reler e tentar melhora-la. E de uma olha nos markdown aqui do site, formatei seu código e um pouco de sua pergunta para ficar mais fácil de ler Commented 16/07/2014 às 2:26
  • Valeu Fernando. Recuei 4 espaços e não foi, provavelmente entendi errado e dai abri o <div> para que aparecesse o código, obrigada por ajudar. Usarei o jsFiddle.
    – user49915
    Commented 16/07/2014 às 3:47

1 Resposta 1

9

É o seguinte, se entendi o que você quer. Seu código tem os seguintes problemas:

  • Seu seletor do evento on() não está preparado para trabalhar com elementos dinâmicos;
  • Seu código html, ta com uns problemas, tipo tem uns espaços antes das div, tipo isso: < div>< /div>, e o correto seria <div></div> (talvez isso não seja um problema em seu ambiente, mas aqui para mim no Chrome, isso não era interpretado como html e sim com text);

Então solucionei o problema do seletor do evento on(), para elementos dinâmicos assim:

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

O que acontece e que o método on(), funciona da seguinte forma para capturar elementos criados dinamicamente:

Vou tentar explicar por partes:

// 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(){...});

Não sei se ficou claro minha explicação, qualquer duvida a respeito do método on() você pode consultar na documentação do método on().

E para ficar mas fácil de entender criei um exemplo da solução funcionando

E se não era bem isso que você necessitava comente.

4
  • Fernando, valeuzão, resolveu meu problema. A div separada era para mostrar o código, porque eu nao estava sabendo inserir direito e dai ele interpretava e só mostrava o texto. Obrigadão.
    – user49915
    Commented 16/07/2014 às 3:51
  • @user49915, fico feliz que deu certo e pude lhe ajudar. Commented 16/07/2014 às 11:21
  • 1
    É muito comum esse problema dos eventos não funcionarem em elementos dinâmicos quando se faz uma requisição AJAX. E só com o on() pra resolver isso. @Fernando, foi uma bela explicação! Commented 16/07/2014 às 11:50
  • Fernando, sua explicação sobre o método On() foi a melhor que encontrei. Eu também estava com o mesmo problema. Mas no meu causo foi apenas uma confusão em relação aos parâmetros que estava passando para o método. Muito obrigado!
    – user18214
    Commented 19/11/2014 às 14:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .