jQuery将不会绑定到点击处理程序图像

Question

我已经创建了一个表使用由我的servlet返回的JSON对象的数组。我试图做到这一点，当我点击每行之前添加的图像时，它会调用一个函数。下面的代码应该可以工作，但它不会，我想我错过了一些简单的东西。

$(document).ready(function(){ 
      loadData(); 
      $("#item").bind("click", function() { alert("test"); }); 
    }); 
function loadData(){ 
    $.ajax({ 
     type: "POST", 
     url: "http://myservlet.com/orders", 
     data: { } 
     }).done(function(msg) { 
     response = $.parseJSON(msg); 
     $.each(response, function(key,value) { 
       alert(value.order_id); 
       var item = 0; 
       $("#ordersTable tbody").append(
         "<tr>"+ 
         "<td><img src=http://examplewebsiteurl.com/plus.png id='item'></img></td>"+ 
         "<td>"+value.order_id+"</td>"+ 
         "<td>"+value.sku+"</td>"+ 
         "<td>"+value.quantity_purchased+"</td>"+ 
         "<td>"+value.product_name+"</td>"+ 
         "<td>"+value.buyer_name+"</td>"+ 
         "<td>"+value.buyer_phone_number+"</td>"+ 
         "</tr>" 
         ); 
      }); 
     }); 

} 

Answer 1

尝试像

$(document).on('click', '#item', function() { 
alert("test"); 
}); 

Answer 2

加载数据是异步操作，这就是为什么填充DOM之前，你不能绑定任何东西。您可以提供一个回调函数，一旦数据到达并可用，就会调用它。或者您可以使用$ .ajax是Promise对象的事实。例如：

function loadData() { 
    return $.ajax({ 
     type: "POST", 
     url: "http://myservlet.com/orders", 
     data: {} 
    }).done(function (msg) { 
     $.each(response, function (key, value) { 
      var item = 0; 
      $("#ordersTable tbody").append(
       "<tr>" + 
       "<td><img src=http://examplewebsiteurl.com/plus.png class='item'/></td>" + 
       "<td>" + value.order_id + "</td>" + 
       "<td>" + value.sku + "</td>" + 
       "<td>" + value.quantity_purchased + "</td>" + 
       "<td>" + value.product_name + "</td>" + 
       "<td>" + value.buyer_name + "</td>" + 
       "<td>" + value.buyer_phone_number + "</td>" + 
       "</tr>"); 
     }); 
    }); 
} 

loadData().done(function() { 
    $(".item").bind("click", function() { alert("test"); }); 
});