-1

私は特定のdivのクラスを変更するためにいくつかのjQueryを使用する必要があるというプロジェクトに取り組んできました。次に、そのdivをターゲットにして、別のjQueryを使用して特定のアクションを実行する必要があります。私の問題は、div クラスが変更されたときに、新しいクラスを使用してターゲットにできないことです。

HTML コード -

<div class="box"></div>

<h1 class="change-class">Change class name</h1>

<br> <a class="hide-new">Hide new named</a>

jQueryコード -

$(".change-class").click(function () {
    $(".box").removeClass('box').addClass('test box');
});

$(".test").click(function () {
    $('.test').toggle(500);
});

JSFiddle でサンプル プロジェクトを作成しました - http://jsfiddle.net/KT9kn/

どんな助けでも大歓迎です。

ジェイミー

4

4 に答える 4

2

そのクラスの要素が存在する前に、clickハンドラーをクラスにバインドします。testライブバインディング用

$(document).on('click', '.test', function() {
    ...
});
于 2013-07-30T22:11:27.363 に答える
1

遅延イベントを使用したい。変化する：

$(".test").click(function () {
    $('.test').toggle(500);
});

に：

$("ELEMENT THAT CONTAINS YOUR BOX").on('click', '.test', function () {
    $(this).toggle(500);
});
于 2013-07-30T22:07:51.447 に答える
1

JQuery イベント バインディングは、現在見つかっている既存の要素にのみ適用されます。クリック イベントを.testJQuery にバインドすると、バインドする要素が見つかりません。コードを次のように変更します。

$(".change-class").click(function () {
    $(".box").removeClass('box').addClass('test box');
    $(".test").click(function () {
        $('.test').toggle(500); 
    });
});

または、動的に作成された要素に対するSO の質問 Event binding?を参照してください。イベントを動的に追加するため。

于 2013-07-30T22:08:53.747 に答える
1 
$(".change-class").click(function () {
    var changed = $(".box").removeClass('box').addClass('test');
    changed.click(function() {
        $(this).toggle(500);
    });
});

変数をローカルに使用して jquery オブジェクトを保存し、その変数を使用して、変更が実行された後にクリック イベントをアタッチできます。

変数をバイパスして、次のようにすることもできます。

$(".change-class").click(function () {
    $(".box").removeClass('box').addClass('test').click(function() {
        $(this).toggle(500);
    });
});

しかし、読みにくくなります。

于 2013-07-30T22:09:59.243 に答える