將事件綁定到ajax成功添加元素

Question

我遇到問題。

我使用Ajax將一些圖像從HDD上傳到網站; 成功我將結果追加到顯示圖像的列表中，並添加了一個用於刪除圖像的按鈕（刪除過程也在ajax中）。

如果我加載的圖像刪除按鈕不起作用，它只能在一次刷新後才起作用。

我該如何將它綁定到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

當在jQuery中綁定一個事件時，該事件被添加到由jQuery選擇器創建的jQuery元素集中的所有元素。這隻會執行一次，如果添加了與該選擇器匹配的元素，則仍然必須將事件綁定到新插入的元素。或者，你可以使用.live();。

// 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. 您在前面加上一個靜態ID屬性的元素。建議每頁僅使用一次特定ID。
2. buttonEvents（）;可能是您的回調將事件綁定到按鈕。如果是這樣的話;每次添加按鈕時都會將事件綁定到所有按鈕，導致事件被多次綁定到某些按鈕。

Answer 2

你可能忘了jQuery代碼<a id="delete" class="ir delete" href="">delete</a>但我認爲你有這樣的事情：

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

如果更改click事件到live事件，它可能解決您的問題

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