La función de clic de jQuery no funciona después de actualizar la clase

Question

Una vez que cambio la clase del elemento usando jQuery, la función de clic no funciona en la nueva clase.

Aquí está mi código

jQuery('.close').on('click', function() { 
    jQuery('div').slideUp(); 
    jQuery(this).addClass('open'); 
    jQuery(this).removeClass('close'); 
}); 


jQuery('.open').on('click', function() { 
    jQuery('div').slideDown(); 
    jQuery(this).addClass('close'); 
    jQuery(this).removeClass('open'); 
});​ 

Puede probar aquí - http://jsfiddle.net/NkG9k/1/

intente hacer clic en el botón de activación de nuevo. (no deslizará el div)

Answer 1

Pruebe esto, aplique on en el documento y use el filtro de clase para adjuntar el evento a su botón.

Live Demo

jQuery(document).on('click','.close', function() { 
    jQuery('div').slideUp(); 
    jQuery(this).addClass('open'); 
    jQuery(this).removeClass('close'); 
}); 


jQuery(document).on('click','.open', function() { 
    jQuery('div').slideDown(); 
    jQuery(this).addClass('close'); 
    jQuery(this).removeClass('open'); 
});​ 

Usted necesidad de delegar evento el padre estática del elemento que desea este comportamiento dinámico de modo que cuando se cambia la clase (de open a close y desde close a open) de una elemento el evento se vincula automáticamente en este elemento según la clase recientemente cambiada.

Understanding Event Delegation

delegación de eventos nos permite adjuntar un único detector de eventos, a un elemento de padres, que se activará para todos los descendientes que coinciden con un selector de , si existen estos descendientes o se añaden en el futuro.

Answer 2

has eliminado la clase que está desencadenando el evento. puede darle una identificación y llamarlo con identificación en lugar de clase.

check this

jQuery('#close').toggle(function() { 
    jQuery('div').slideUp(); 
    jQuery(this).addClass('open'); 
    jQuery(this).removeClass('close'); 
},function() { 
    jQuery('div').slideDown(); 
    jQuery(this).addClass('close'); 
    jQuery(this).removeClass('open'); 
}); 
<div id="close" class="close">toggle</div> 

Answer 3

Debe utilizar evento en vivo en lugar de clic como el evento en directo funciona cuando se crea el elemento

jQuery('.close').live('click', function() { 
    jQuery('div').slideUp(); 
    jQuery(this).addClass('open'); 
    jQuery(this).removeClass('close'); 
}); 


jQuery('.open').live('click', function() { 
    jQuery('div').slideDown(); 
    jQuery(this).addClass('close'); 
    jQuery(this).removeClass('open'); 
});​ 

Answer 4

Pruebe algo como esto:

$('.close').bind('click', function() { 
$('div').toggle(); 
}); 

Si necesita la animación, puedes ver esto link

Answer 5

si desea utilizar el código a continuación.

<button class="toggle">toggle</button> 
<div>THIS IS TEXT</div> 


jQuery('.toggle').toggle( 
    function() { 
     jQuery('div').slideUp(); 
    }, 
    function() { 
     jQuery('div').slideDown(); 
    } 
);