Skip to main content
adicionou 20 caracteres ao conteúdo
Fonte Link
Fernando Leal
  • 10mil
  • 5
  • 44
  • 93

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

// o primeiro parâmetro é o evento, no caso o click'click'
// o segundo é o seletor "dinâmico", no caso '.img_des_row .icon-trash-medmed'
// (eu penso assim: esse seletor secundário será executado a cada evento (no caso click) no seletor (principal('.list-mode')) onde o on'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.

É 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) 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.

É 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.

Fonte Link
Fernando Leal
  • 10mil
  • 5
  • 44
  • 93

É 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) 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.