0

私はこのコードを持っています:

$('.self_delete').on('ajaxSuccess', function(event, xhr, settings) {
    json = jQuery.parseJSON(xhr.responseText);
    if ($(this).attr('href') == json.delete_url ) {
        alert('going to delete');
        $(this).closest($(this).data('parent-selector')).remove();
    } else {
      alert('not this one!');
    }
});

これは、すでにページ上にある要素に対して完全に機能します。しかし、新しい要素を動的に追加して.self_delete要素をクリックすると、ajaxSuccessはトリガーされません(ただし、リンクは機能します)。

ページにすでにいくつかのアイテムがある場合は、別のアイテムを追加してから、最新のアイテムをクリックしてイベントをトリガーします。アラートは「これではありません!」です。既存の要素に対してトリガーされますが、新しい要素に対してはトリガーされません。

何か案は?----編集-----私は次のようにデリゲートを使用します:

$('#lists').on('ajaxSuccess', '.self_delete', function(event, xhr, settings) {
    json = jQuery.parseJSON(xhr.responseText);
    if ($(this).attr('href') == json.delete_url ) {
        alert('going to delete');
        $(this).closest($(this).data('parent-selector')).remove();
    } else {
      alert('not this one!');
    }
});

これで、ページがリロードされても、イベントが発生することはありません。ただし、$('#lists .self_delete')を実行すると、a.self_deleteの配列が返されるため、セレクターは適切です。(眠りにつく、私が目を覚ますときに誰かが提案を持っていることを願っています!thx!)

---編集2-----これを追加した場合:

$('#lists').on('click', '.self_delete', function(event) {
    alert('going to delete from click');
});

アラートは発生します。すべての場合。したがって、基本的に、.on()はajaxSuccessイベントを登録できないようです。私はこれをグーグルで検索しようとしましたが、.on()に関連するものを検索することは不可能なことを見逃しているようなものであり、そのような一般的な単語です:-S

4

3 に答える 3

1

$('.self_delete').<- この部分は 1 回実行されます (初めてドキュメントが読み込まれるとき)。そして class を持つすべての要素にハンドリング関数をアタッチしますself_delete

委任を使用する必要があります。ハンドラーを包含オブジェクト (以下の例では ) にアタッチし、ハンドラーが呼び出されるたび.containerに評価します。.self_delete

$('.container').on('ajaxSuccess', '.self_delete', function(event, xhr, settings) ...

についてもっと読む.on()

于 2012-06-12T05:24:41.360 に答える
0

動的コンテンツが作成されたら、バインドを再適用する必要があります。

于 2012-06-12T05:23:32.213 に答える
0

チャットルームで何人かと話した後、 ajaxSuccess を要素にアタッチする必要があり、バブルアップできないようです。そこで、.on() を .self_delete アイテムの親にアタッチし、そこから $.ajax を使用することで問題を解決しました。これにより、期待どおりに ajaxSuccess にアクセスできるようになりました。

于 2012-06-12T14:52:08.193 に答える