2

各項目の右側に「削除」ボタンがあるjqueryのソート可能なリストを作成しました。削除ボタンをクリックすると、その項目が削除されます。ここの別の質問からこれを見つけました（Jquery-uiのソート可能なリスト項目を削除します）。ユーザーがリストにアイテムを追加できるようにする必要があるため、[追加] ボタンを作成しました。追加は正常に機能しますが、新しく追加されたアイテムは削除ボタンを使用して削除できません。これがjfiddleです： http://jsfiddle.net/g33ky/fadAn/1/

コードは以下のとおりです。

<script>
$("#fruitList").sortable();

$("#fruitList .delete").click(function () {
  $(this).parent().remove();
});

$("#addFruit").click(function () {
  $('#fruitList').append("<li class='fruit'>New fruit<button class='delete'>Delete</button></li>");
});
</script>

<html>
<button id='addFruit'>Add fruit</button>
<ul id="fruitList">
    <li class="fruit">Apple
        <button class="delete">Delete</button>
    </li>
    <li class="fruit">Banana
        <button class="delete">Delete</button>
    </li>
    <li class="fruit">Orange
        <button class="delete">Delete</button>
    </li>
</ul>
</html>

「フルーツを追加」をクリックしてから、新しいフルーツを削除してみてください。「新しいフルーツ」の削除が機能しないことがわかります。ここでグーグルで検索しましたが、今のところ運がありません。どんな助けでも大歓迎です。

4

4 に答える 4

5

動的に追加された要素のイベント ハンドラは定義されていません。

代わりにこのコードを使用してください

$("#fruitList").on('click', '.delete', function () {
    $(this).parent().remove(); 
});

クリックハンドラを動的に追加します

于 2013-09-19T22:04:42.663 に答える
2

使用する ：

$("body").on('click', '#fruitList .delete', function () {
    $(this).closest( ".fruit" ).remove();
});

JSFiddle : http://jsfiddle.net/NhhKd/

于 2013-09-19T22:03:35.060 に答える
1

これは非常に単純な状況で、動的に作成された新しい要素が DOMにあり、同じクラスの以前の要素と同じ動作をさせたいとします...

通話".click(function(){})"を に変更するだけ".live('click', function() {})"です。

jQuery >= v1.7 以降では、 を使用できます (および使用する必要があります) .on()。http://api.jquery.com/on/

これはdelegationと呼ばれます。http: //www.sitepoint.com/event-delegation-with-jquery/を参照してください。

于 2013-09-19T22:03:24.427 に答える
0

これは、jQuery の「クリック」メソッドを使用してハンドラーを実行しているためです。残念ながら、このメソッドは既存の DOM 要素にのみバインドするため、新しい要素を追加すると

  • 、またはその他のタグの場合、その「クリック」ハンドラーにはバインドされません。これを修正するには、jQuery の「on」関数を使用して、存在するもの、または将来作成されるものにバインドする必要があります。

    ドキュメントはこちら: http://api.jquery.com/on/

    おそらくあなたのJSはこのように見えるはずです（エラーがある場合は申し訳ありませんが、現時点ではテストする場所がありません）

    $( "#fruitList" ).on( "click", ".delete", function() {
    $(this).parent().remove();
});

$( "#fruitList" ).on( "click", "#addFruit", function() {
    $('#fruitList').append("<li class='fruit'>New fruit<button class='delete'>Delete</button></li>");
});
    • 于 2013-09-19T22:09:06.967 に答える