0

こんにちは、追加および削除可能なフィールドを含むフォーム ページを作成しようとしています。「フィールドの追加」ボタンは正常に機能しますが、「フィールドの削除」は機能しません。理由を知っている人はいますか？

HTML

<div id="email">
<div>Primary Email:
<input type="text" name="email" length="40" />
</div>
</div>
<a href="#" onclick="return false;" id="addField">Add New Field</a>

JQuery

$(document).ready(function () {
var i = 1;
$("#addField").click(function () {
var targetDiv = $(this).prev('div');
$('<div>Pretend this is a text box <a href="#" id="rem" >Remove Field</a></div>').appendTo(targetDiv);
i++;
});

$('#rem').click(function () {
$(this).closest('div').remove();
});

});

ありがとう！

4

1 に答える 1

2

注: ID は一意である必要があるため、ID として使用する代わりにrem、クラスとして使用してください

だから変える

$('<div>Pretend this is a text box <a href="#" id="rem" >Remove Field</a></div>').appendTo(targetDiv);

に

$('<div>Pretend this is a text box <a href="#" class="rem" >Remove Field</a></div>').appendTo(targetDiv);

次に、動的に追加されたコントロールを操作しているため、.on() でイベント委任モデルを使用します

$(document).on('click','.rem', function () {
    $(this).closest('div').remove();
});

デモ:フィドル

于 2013-05-01T03:03:51.297 に答える