0

追加したリストに追加した項目を削除しようとしています。

スクリプトは、リストにあるアイテムでは機能しますが、追加されたアイテムでは機能しません。

http://jsfiddle.net/9mkmE/

<script>
$(document).ready(function(){
$('.add').click(function() {
    $(".list").append('<li>'
                              + 'Item '
                              + '<a href="#" class="remove_project_file" border="2">X</a>'
                              + '</li>');

    return false;
});

// using live() will bind the event to all future
// elements as well as the existing ones
$('.remove').on('click', function() {
    $(this).parent().remove();
    return false;
});
});
</script>

<span class="inputname">
    <a href="#" class="add">
        Add
    </a>
</span>

<ul class="list">
    <li>Item <a href="#" class="remove" border="2">X</a></li>
</ul>

</div>
4

3 に答える 3

3

を使用する必要があります。on()のイベント委任構文:

変化する：

$('.remove').on('click', function() {
    $(this).parent().remove();
    return false;
});

に：

$('.list').on('click', '.remove', function() {
    $(this).parent().remove();
    return false;
});

jsFiddle の例

追加したリスト項目に remove クラスも追加する必要があることに注意してください。

$(".list").append('<li>' + 'Item ' + '<a href="#" class="remove remove_project_file" border="2">X</a>' + '</li>');

ドキュメントから.on()：

イベント ハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードが .on() を呼び出す時点でページに存在している必要があります。要素が存在し、選択できることを確認するには、ページの HTML マークアップにある要素のドキュメント対応ハンドラー内でイベント バインディングを実行します。新しい HTML がページに挿入されている場合は、要素を選択し、新しい HTML がページに配置された後にイベント ハンドラーを添付します。

于 2013-07-19T14:27:24.090 に答える