3

Fiddle: http://jsfiddle.net/YbfZG/4/何らかの理由で toggleDiv/removeDiv 関数が機能していません (私は jsfiddle をあまり使用していません)。達成しようとしています。

ユーザーがドロップダウンから選択して項目 (div) を動的に追加できるページがあります。これは .append() によって実現されます。また、アイテムを削除して (.remove())、再度追加することもできます。各 div には、リンクをクリックするとトリガーされる非表示/表示領域が含まれます。

div がページに初めて追加されたとき、非表示/表示領域は正常に機能します。同じ div を削除してから再度追加すると、非表示/表示が機能しなくなります。これは、div が DOM から完全に削除されていないため、ID に基づいて動作する非表示/表示機能が、作業する正しい div を見つけられないためだと思います。

remove 関数を $(this).empty().remove(); に変更しようとしました。しかし、それはうまくいきませんでした。デタッチも試してみましたが、機能に変化はありませんでした。私はいくつかの読書をしましたが、.on() を使用する必要がある可能性がありますが、それを構造化する方法がわかりません。

ETA: コードを追加してトグルし、div 名を数値だけのものに変更しました (私の入力ミス)。

4

4 に答える 4

3

マークアップを次のように変更すると、より簡単になります。

<div id="8" class="wrapper">
    <div>
    <a title="Remove" class="remove" href="#">Remove</a>
    </div>
</div>

（基本的に、メインdivに「wrapper」クラスを追加し、removeリンクに「remove」クラスを追加しました）

したがって、onclick属性を削除し、代わりに単純な関数を使用します。

$('body').on('click','a.remove',function(){
    $(this).closest('div.wrapper').remove();
});​

デモ

あなたの完全なコードを与えられて、これがそれを機能させる方法です（デモ）：

$(function() {

    $('.elements').on('click', '.remove', function() {
        $(this).closest('div[id^=div]').remove();
    });

    $('.elements').on('click', '.open-close', function() {
        var hideShowN = $(this).closest('div[id^=div]').attr('id').replace(/\D/g,'');
        $('#hide_show_'+hideShowN).toggle();
    });

    $('.add').on('click', function() {
        $('.elements').append('<div id="div_8">Element<a class="open-close" href="#" title="Open/Close">Open/Close</a><div id="hide_show_8" style="display: none;">Stuff</div><a class="remove" href="#" title="Remove">Remove</a></div>');
    });

});​
于 2012-10-16T14:16:09.430 に答える
1

jQuery を使用する場合は、リスナーを使用することをお勧めします。よりクリーンで、多くの場合簡単です。

私はあなたが必要だと思うものでjsfiddleを作りました。ここで確認してください: http://jsfiddle.net/YbfZG/2/。

この例で重要なのは、要素を削除するリスナーが、削除ボタンではなく「要素」div をリッスンしていることです。リスナーがトリガーされると、クリックが「.element .remove」内にあるかどうかを確認し、そうであれば関数を実行します。

リスナーを「.element .remove」に直接配置すると、jQuery がリスナーを追加した後に追加されたため、「追加」ボタンを使用して新しく追加されたクラスに対して失敗するため、これは重要です。

于 2012-10-16T14:30:13.540 に答える
0

以前にも同様の問題がありました。同じことが原因だったと思います。問題は、div を削除/読み取りするときにクリック ハンドラーを再バインドする必要があることです。私がしていることは、ハンドラーをバインドする関数を作成し、要素が DOM に追加/削除されているこのような状況が発生するたびに呼び出すことです。

幸運を

于 2012-10-16T14:17:44.623 に答える
0

イベント バインディングを保持するには、remove の代わりに.detachを使用します。ドキュメントからの引用。

.detach() メソッドは、.detach() が削除された要素に関連付けられたすべての jQuery データを保持することを除いて、.remove() と同じです。このメソッドは、削除された要素を後で DOM に再挿入する場合に便利です。

于 2012-10-16T14:19:01.410 に答える