0

jQueryがロードされたときにdivを非表示にしたい、かなり単純なスクリプトがあります。クリックしてdivが再び表示されるように、「トリガー」要素を追加します。次に、「トリガー」のクラスが変更され、それをもう一度クリックすると、divが再び消えるはずです。残念ながら、「トリガー」クラスが変更されるまでスクリプトは正常に機能します。もう一度クリックしても何も起こりません。

解決された質問

動作中のJSは次のとおりです。

$(document).ready(function () {
if ($('#Bestellungen #Offene .products')) {
    $('#Bestellungen #Offene .products').hide();
    $('#Bestellungen #Offene .products').before('<div class="trigger"></div>');
    $('#Bestellungen #Offene').on('click', '.trigger', function () {
        $(this).addClass('minus').next().show();
    });
    $('#Bestellungen #Offene').on('click', '.trigger.minus', function () {
        $(this).removeClass('minus').next().hide();
    });
}

}）;

そしてここにHTML：

<div id="Bestellungen">
<div id="Offene">
    <table>
        <tr>
            <td>
                <div class="products">blablabla</div>
            <td>
        </tr>
    </table>
</div>

4

3 に答える 3

6

の場合、動的に追加されたclass要素にはデリゲートイベントが必要です。なぜなら、動的な要素、classまたはそれを持つ要素idとして扱われる、または。dynamicclassid

後でクラスminusを追加するので、動的要素として扱います。.trigger.trigger.minus

だから試してみてください：

$('#Bestellungen #Offene').on('click', '.trigger.minus', function () {
    $(this).removeClass('minus').next().hide();
});

.on()デリゲートイベントを実装するには、上記のようなjQueryのメソッドを使用する必要があります。

ノート

.on()forデリゲートイベントの構文は次のとおりです。

$(StaticParentElement).on(eventName, target, handlerFunction);
于 2012-09-12T16:49:39.027 に答える
1

on添付プロセスを使用します。

$(document).ready(function () {
if ($('#Bestellungen #Offene .products')) {
    $('#Bestellungen #Offene .products').hide();
    $('#Bestellungen #Offene .products').before('<div class="trigger"></div>');
    $('#Bestellungen #Offene').on('click', '.trigger:not(.minus)', function () {
        $(this).addClass('minus').next().show();
    });

    /* This is the section that doesn't work */
    $('#Bestellungen #Offene').on('click',  '.trigger.minus', function () {
        $(this).removeClass('minus').next().hide();
    });
}

.minusまた、クラスのあるアイテムをクリックしたときに実行されないように、最初のイベントハンドラーからクラスを持つ要素を除外する必要があります.minus。

または、次のようにコードを記述できます。

$(document).ready(function () {
if ($('#Bestellungen #Offene .products')) {
    $('#Bestellungen #Offene .products').hide();
    $('#Bestellungen #Offene .products').before('<div class="trigger"></div>');
    $('#Bestellungen #Offene .trigger').click(function () {
        $(this).toggleClass('minus').next().toggle();
    });
}
于 2012-09-12T16:55:37.190 に答える
1

バインドしようとしたときにクラスがないため、要素に「マイナス」ハンドラーをアタッチしていないため、機能しません。
onを使用してイベントを親要素にアタッチしてから、ターゲットに一致するセレクターを作成するか、両方の場合に単一のハンドラーを使用することもできます。

$('#Bestellungen #Offene .trigger').click(function () {
    $(this).toggleClass('minus').next().toggle($(this).hasClass('minus'));
});

これが機能するのは、トグル関数が要素を表示するか非表示にするかを示すブールパラメータを受け入れるためです。

于 2012-09-12T17:01:27.533 に答える