加載後在圖像上調用函數

Question

我試圖在jQuery的頁面中動態地添加一大堆圖像，然後使用pixastic圖像處理庫對其進行修改。用戶輸入一些搜索標準，返回圖像URL列表，我將它們附加到我的內容區域，然後嘗試做一些事情 - 例如反轉它們。這裏是我的代碼：

function loadImages() { 
$.ajax({ 
    type: "POST", 
    url: "/reporter/api/ezdz/getslides/", 
    data: { 
     'startDate': $("#startdate").val(), 
     'endDate': $("#enddate").val() 
    }, 
    success: function (data) { 
     for (var i = 0; i < data.length; i++) { 
      var imgname = "imgename" + i; 
      $("#imagecontentarea").append('<img id=' + imgname + ' src="' + data[i].ImageUrl + '" />'); 
      $(imgname).one('load', function() { 
       $(imgname).pixastic("invert"); 
      }); 
     } 
    } 
}); 
} 

圖像返回就好，我的加載事件甚至被解僱......但圖像不會改變。

$("#imagecontentarea").append('<img id="testimg" src="http://localhost/thumbnail.jpg" />'); 
$("#testimg").one('load', function() { 
    $("#testimg").pixastic("invert"); 
}); 

我寧願它被裝載在每個圖像上進行操作，而不是等待，直到他們在所有負載然後開始反轉他們：如果我把它的document.ready

此代碼然而，工作正常。我查看了imagesloaded庫，但它看起來像在父容器上運行（?）。

無論如何，我在這裏做錯了什麼？

Answer 1

試着改變你的成功的功能是：

success: function (data) { 
    for (var i = 0; i < data.length; i++) { 
     var imgname = "imgename" + i; 
     $("#imagecontentarea").append('<img id=' + imgname + ' src="' + data[i].ImageUrl + '" />'); 
     (function (imgname) {$(imgname).one('load', function() { 
      $(imgname).pixastic("invert"); 
     });})(imgname); 
    } 
} 

你的代碼無法在封閉節省imgname，所以你在循環的最後名義運營。

編輯：另一種可能性是使用一類：

success: function (data) { 
    for (var i = 0; i < data.length; i++) { 
     var imgname = "imgename" + i; 
     $("#imagecontentarea").append('<img class="imagename" id=' + imgname + ' src="' + data[i].ImageUrl + '" />'); 
    } 
    $(".imagename").one('load', function() { 
     $(this).pixastic("invert"); 
    }); 
}