ajaxへのイベントを成功させると、要素が追加されます

Question

問題があります。

Ajaxを使用してHDDからWebサイトにいくつかのイメージをアップロードします。 私は画像を表示するリストの中に結果を追加し、画像を削除するためのボタンを追加します（削除プロセスはajaxにもあります）。

イメージをロードすると、削除用のボタンが機能せず、1回のリフレッシュ後にのみ機能します。

どうやってAJAXの成功につなげることができますか？

var uploader = new qq.FileUploader({ 
      element: document.getElementById('file-uploader-demo1'), 
      allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'], 
      sizeLimit: 21474836, // max size 
      action: '/FileUpload/FileUpload', 
      multiple: false, 
      debug: true, 
      params: { 
       param1: imgId 
      }, 
      fileTemplate: '<li>' + 
        '<span class="qq-upload-file"></span>' + 
        '<span class="qq-upload-spinner"></span>' + 
        '<span class="qq-upload-size"></span>' + 
        '<a class="qq-upload-cancel" href="#">Cancel</a>' + 
        '<span class="qq-upload-failed-text"></span>' + 
       '</li>', 
      onComplete: function (id, fileName, result) { 
       var lista = $('ul.uploaded-images'); 
       lista.prepend('<li><img src="/img/' + imgId + '/' + result.filename + '" /><a id="delete" class="ir delete" href="">delete</a></li>'); 
       buttonEvents(); 
       qq.FileUploaderBasic.prototype._onComplete.apply(this, arguments); 

       // mark completed 
       var item = this._getItemByFileId(id); 
       qq.remove(this._find(item, 'cancel')); 
       qq.remove(this._find(item, 'spinner')); 

       if (result.success) { 
        qq.addClass(item, this._classes.success); 
       } else { 
        qq.addClass(item, this._classes.fail); 
       } 

      } 
     }); 

ご協力いただきありがとうございます。

Answer 1

を解決

$("a.delete").click(function(e) { 
    // some ajax call here 
}); 

をjQueryでイベントをバインドすると、jQueryセレクタによって作成されたjQuery要素セットのすべての要素にイベントが追加されます。これは1回だけ実行され、セレクタに一致する要素を追加する場合は、新しく挿入された要素にイベントをバインドする必要があります。あるいは、 .live();を使用できます。

1. あなたは、静的ID属性を持つ要素を付加されています

   // bind a callback to the click event of all 
   // elements currently present with id "delete" 
   $('#delete').click(callback); 
   
   // bind a callback to the click event of all 
   // elements currently present with id "delete" 
   $('#delete').bind('click', callback); 
   
   // bind a callback to the click event of all elements currently present 
   // with id "delete", and elements that are later inserted with id "delete" 
   $('#delete').live('click', callback); 
   

   また、私は問題を引き起こす可能性がありますあなたのコード内の2つのことに気付いています。 1ページに1回だけ特定のIDを使用することをお勧めします。

2. buttonEvents（）;イベントをボタンにバインドするためのコールバックかもしれません。このような場合は;ボタンが追加されるたびにすべてのボタンにイベントをバインドしているため、イベントはいくつかのボタンに複数回バインドされます。

Answer 2

あなたはおそらく<a id="delete" class="ir delete" href="">delete</a>のためのjQueryコードを忘れてしまったが、私はあなたがこのようなものがあると思う：あなたはliveイベントにclickイベントを変更した場合、それはおそらくあなたの問題

$("a.delete").live("click", function(e) { 
    // some ajax call here 
});