1

ボタンのクリックで追加された div を削除するのに少し問題があります。

hide() を使用すると、審美的に正しい動作が得られますが、実際には新しい div が削除されません。これは、このデータが Web サービスに送信されるためです。

JQuery:

$('a.addListOVM').click(function(e){    
    e.preventDefault();         
    $('.addCardOVM').append('<div class="divform"><label>' + $('.my_select').find(':selected').val() + '</label>' + '<a class="removed" href="">-</a></div>');

    $('.removed').click(function(e){            
        e.preventDefault();
        $(this).closest('.divform').hide();
    });                     
});

テンプレート HTML:

<div class="divform">
 <select class="my_select" name="vlans_{$NetworkDTO->id}[]">
  {foreach from=$arrNetworkDTO item=NetworkDTO name=arr}
    <option class="addOvmCardList" value="{$NetworkDTO->name|escape}">{$NetworkDTO->name}</option>
  {/foreach}
 </select>
<a href="" class="addListOVM">+</a> 
</div>

ボタン自体は動的に生成され（3行目を参照）、クリックすると、ウィンドウ全体を閉じずに特定の追加されたdivを削除し.remove()たいhide().

だから、誰でも私に言うことができます：

  1. hide() の代わりに remove() を使用すると、hide() のように個々の div を削除するのではなく、テンプレート ウィンドウ全体が閉じられるのはなぜですか。

  2. 追加された div の複数のインスタンスを作成したときに、.removed クリック ハンドラーが複数回呼び出されるのはなぜですか (2 つのインスタンスを作成する場合は、1 回ループするインスタンスを削除し、2 回ループするインスタンスを削除するなど)。

  3. 追加された div を実際に削除しながら、hide() の物理的な機能を取得するにはどうすればよいですか?

ありがとう

4

2 に答える 2

4

1.hide（）の代わりにremove（）を使用すると、hide（）のように個々のdivを削除するのではなく、テンプレートウィンドウ全体が閉じます。

テンプレートウィンドウの意味がわからないので、ここではどうしようもありません。

2.追加されたdivの複数のインスタンスを作成したときに、.removedクリックハンドラーが複数回呼び出されるのはなぜですか（2つのインスタンスを作成する場合、1つを削除すると、1回ループし、2番目を削除すると2回ループします）。

クリックイベントハンドラーが実行されて新しいを作成するときはいつでも、新しいイベントハンドラーをすべての要素、作成されたばかりの要素、および他のすべての既存の要素にdivバインドするためです。.removed

3.追加されたdivを実際に削除しながら、hide（）の物理機能を取得するにはどうすればよいですか？

たぶんそれは上記の問題に関連しています。：を削除するイベントハンドラーにイベント委任を使用します。div

$('a.addListOVM').click(function(e){    
    e.preventDefault();         
    $('.addCardOVM').append('<div class="divform"><label>' + $('.my_select').find(':selected').val() + '</label>' + '<a class="removed" href="">-</a></div>');                 
});

$('.addCardOVM').on('click', '.removed', function(e){            
    e.preventDefault();
    $(this).closest('.divform').remove();
});
于 2013-01-09T16:40:27.320 に答える
0

jQuery Live 関数を使用して、動的に追加された HTML を選択します。

 $('.removed').live('click',function(e){            
    e.preventDefault();
    $(this).closest('.divform').hide();
});
于 2013-01-09T16:41:37.600 に答える