2

私は現在、かなり単純なものでテストしています。私のプロジェクトでは、フォームを介して listitem を追加し、更新されたリストですぐに削除できます。ファイルの先頭で、delete クリック ハンドラをバインドします。

$(".delete").bind("click", this.deleteListitem);

クラス「delete」を持つすべての要素は、Ajax 呼び出しの前または後に削除できると思います。そのため、クラス「削除」で新しいリストアイテムを追加すると、それをクリックしようとしますが、関数に入りません。古いアイテムはそうです。

削除機能:

PanelRoadtrip.prototype.deleteListitem = function(e)
{
    console.log("click");
    e.preventDefault();

    this.listId = $(event.currentTarget).parent().parent().attr("id");
    this.listItemValue = $(event.currentTarget).parent().text().split(" delete")[0];
    $.ajax({
        type: "delete",
        url: Util.api + "/roadtrip/delete/" + this.tripId + "/" + this.listId + "/" + this.listItemValue,
        dataType: "json"
    });
    //item verwijderen
    $(event.currentTarget).parent().remove();
};

誰かがこの問題の簡単な解決策を持っていますか、Stackoverflow で検索しましたが、うまくいくものは何も見つかりませんでした。

前もって感謝します

4

3 に答える 3

4

on()変更の代わりに使用する必要がありbind()ます:

$(".delete").bind("click", this.deleteListitem);

に

$(document).on("click",".delete", this.deleteListitem);

(はロード時の DOMdocumentの親要素です。.delete

のドキュメントon()はこちらです。委任されたイベントのセクションを読んでください:

委任されたイベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。委任されたイベント ハンドラーがアタッチされたときに存在することが保証されている要素を選択することで、委任されたイベントを使用して、イベント ハンドラーを頻繁にアタッチおよび削除する必要がなくなります。

于 2013-05-16T14:37:38.673 に答える
1

を使用して、動的に作成されたコンテンツに委任されたイベントハンドラーを使用できます.on()

http://api.jquery.com/on/

それ以外の

$(".delete").bind("click", this.deleteListitem);

使用する

$(document).on( "click", ".delete" this.deleteListitem); 
 //Instead of document use a parent container that exists in DOM at any give time.

クラスを持つ新しく追加された要素に.deleteは、デフォルトでイベントがバインドされていないため、この方法では、イベントをドキュメントまたは親コンテナーに添付し、.delete現在存在するクラスまたは後で追加されるクラスを持つ要素のイベントを DOM に委任します。

于 2013-05-16T14:37:35.003 に答える
0

DOM の準備が整った時点で要素が存在しないため、次のようにバインドする必要があります。.on()

$(document).on("click", ".delete", this.deleteListitem);
于 2013-05-16T14:37:47.143 に答える