Geek asks and answers

JQuery click function not working after class update

Once I changed the element class using jQuery, the click function does not work on the new class.

Here is my code

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');
});​

You can try it here - http://jsfiddle.net/NkG9k/1/

Try to press the switch button again. (he will not cut the div)

+5
source share
5 answers

Try this, apply onto the document and use the class filter to attach the event to your button.

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');
});​

, , ( open close close open) .

, , , .

+9

, . .

    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>
+1

- :

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

,

0

.

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


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

"" , , live- , .

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');
});​
-1

More articles:


All Articles