19

要素を作成する次のコードがあります。

<div id="parent">
    <div id="block_1" >
        <div>
          <input type="text">
        </div>
        <img src="arrow.jpg">
        <div>
          <input type="text">
        </div>
        <div><a href="#" class="remove_block">Remove</a></div>
    </div>
</div>

結果は次のようになります。

ここに画像の説明を入力

ユーザーが ADD ボタンを押すと、Javascript 関数に移動し、div の同じブロックを作成します。コードは次のとおりです。

function add_block() {
var curDiv = $('#parent');
var i = $('#parent div').size()/4 + 1;
var newDiv='<div id="block_'+ i + '" class="parent_div">' +
'<div>' +
'<input type="text">' +
'</div>' +
'<img src="arrow.jpg">' +
'<div>' +
'<input type="text">' +
'</div><div><a class="remove_block" href="#">Remove</a></div>' +
'</div>';
$(newDiv).appendTo(curDiv);
};

ユーザーがブロックの左側にある「削除」リンクを押すと、対応するブロックが削除されます。そして、これは私がしたことです：

$('a.remove_block').on('click',function(events){
   $(this).parents('div').eq(1).remove();
});

問題は、元のブロックの削除のみが機能し、残りは機能しなかったことです。理由を知っている人はいますか？

ここに画像の説明を入力

私はjQueryとJavascriptを初めて使用するので、助けと提案を本当に感謝しています注：jQuery 2.0.3を使用しています

4

5 に答える 5

29

動的コンテンツであるため、静的コンテンツのようなイベントをバインドすることはできません。バインド時に要素が表示されないため、要素にバインドされません。

したがって、次のようにイベントをバインドする必要があります。

$('#parent').on('click', 'a.remove_block', function(events){
   $(this).parents('div').eq(1).remove();
});
于 2013-10-02T04:05:33.653 に答える
3

動的に追加された要素には、イベント委任を使用する必要があります。使用されている構文を使用していても、.on()イベント委任は使用されません。

通常のイベントを登録すると、その時点でDOMに存在する要素にのみハンドラーが追加されますが、イベント委任を使用すると、実行時に存在する要素にハンドラーが登録され、渡されたセレクターが評価されますイベントが要素にバブルされたとき

$(document).on('click', '.remove_block', function(events){
   $(this).parents('div').eq(1).remove();
});
于 2013-10-02T04:05:14.567 に答える
0 
$('a.remove_block').on('click',function(events){
  $(this).parents('.parent_div').remove();
  return false;
});
于 2013-10-02T04:07:00.427 に答える
-2

これには .live を使用できます。

$('body').live('click','#idDinamicElement', function(){
   // your code here
});
于 2013-10-02T04:05:44.103 に答える