[Resolvido] Ação em elemento criado com o after() do jquery

[Diego Mengarda 0]

Boa tarde galera, estou utilizando o after do jquery para adicionar um elemento ao meu código.

 

$('.corposervico').after('<div class="delservico" title="Remover Serviço">x</div>');

 

e esse mesmo elemento possui uma ação ao clicar nele

 

$('.delservico').click( function(){
   alert("funciona");
});

 

mas não está funcionando, ele não faz nada...

também tentei usar o on

 

$('.delservico').on("click", function(){
   alert("funciona");
});

 

mas sem sucesso, alguem saberia como fazer isso funcionar??

 

Fico no aguardo, obrigado.

[P@trique 0]

Fiz o teste aqui e ta funcionando normal:

 

http://jsfiddle.net/KyvrT/

 

Veja se o seu ta igual ao que eu fiz.

[Diego Mengarda 0]

perdão LGBT, faltou a parte que adiona os campos

 

da uma olhada,

 

http://jsfiddle.net/KyvrT/1/

 

não funciona o alert com os campos que são adicionados pelo botão adicionar

[Ismaeldm 5]

Pelo o que eu entendi, o elemento esta sendo criado Dinamicamente, correto?

Então em vez de utilizar o .click(function), faça .live('click', function)

[Diego Mengarda 0]

estava tentando utilizar o .on mas não estava funcionando, com o .live funcionou corretamente, obrigado Ismael

[P@trique 0]

Opa, legal :thumbsup:

[JCMais 75]

estava tentando utilizar o .on mas não estava funcionando, com o .live funcionou corretamente, obrigado Ismael

 

Se você utiliza a versão do jQuery 1.7+, Você deve utilizar o on, o metódo live foi depreciado, basta você dar uma olhada na documentação para ver que o metódo on possui a funcionalidade do live dependendo da forma que você passa os parametros, usando delegação de eventos: http://api.jquery.com/on/

 

Código de exemplo:

HTML:

<button id="add-item">Adicionar Item</button>
<ul id="list">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
</ul>

 

JS:

(function( $ ){

   $list = $( '#list' );


   $( '#add-item' ).on( 'click', function( evt ){
       $listItems = $list.find( 'li' );
       $listItems.last().clone().text( $listItems.length+1 ).appendTo( $list );
   });

   //$( 'li' ).on( 'click', function( evt ){ //Aqui só irá funcionar com os elementos já carregados, qualquer elemento adicionado após este evento ser executado não irá disparar este evento.
   $list.on( 'click', 'li', function( evt ){ //Aqui o evento é delegado para o elemento UL ($list), assim qualquer LI presente dentro do UL irá disparar o evento, seja ele presente agora ou adicionado dinamicamente.
       $( this ).effect( 'highlight' );
   });

}( jQuery ));

 

Veja online:

http://jsfiddle.net/JCMais/h9LCR/