É 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 dasdiv
, 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 comohtml
e sim comtext
);
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.