5

jQueryを使用して要素のクラスを変更すると、クリック関数は新しいクラスでは機能しません。

これが私のコードです

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

ここで試すことができます-http://jsfiddle.net/NkG9k/1/

トグルボタンをもう一度クリックしてみてください。（divをスライドダウンしません）

4

5 に答える 5

9

これを試して、onドキュメントに適用し、クラスフィルターを使用してイベントをボタンに添付します。

ライブデモ

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、イベントは新しく変更されたクラスに従ってこの要素に自動的にバインドされます。closecloseopen

イベント委任を理解する

イベント委任を使用すると、単一のイベントリスナーを親要素にアタッチできます。このリスナーは、子孫が現在存在するか将来追加されるかに関係なく、セレクターに一致するすべての子孫に対して起動します。

于 2012-08-07T13:53:19.850 に答える
1

イベントをトリガーしているクラスを削除しました。IDを指定して、クラスの代わりにidを使用して呼び出すことができます。

これをチェックして

    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>
于 2012-08-07T13:54:07.567 に答える
0

次のようなものを試してください。

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

アニメーションが必要な場合は、このリンクをチェックしてください

于 2012-08-07T13:57:17.653 に答える
0

以下のコーディングに使用したい場合。

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


jQuery('.toggle').toggle( 
    function() {
        jQuery('div').slideUp();
    },
    function() {
        jQuery('div').slideDown();
    }
);
于 2012-08-07T13:57:44.010 に答える
-1

要素の作成時にライブイベントが機能するため、クリックではなくライブイベントを使用する必要があります

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');
});​
于 2012-08-07T13:57:15.573 に答える