jQuery 不会在点击处理程序上绑定到图像答案

【问题标题】：jQuery will not bind on click handler to imagejQuery 不会在点击处理程序上绑定到图像
【发布时间】：2014-07-26 06:36:03
【问题描述】：

我使用 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>"
                       );
            });
      });

}

【问题讨论】：

stackoverflow.com/questions/14220321/…
您的图像元素正在动态加载。所以你必须绑定点击事件，如 $(function(){ $(document).on('click', '#item', callbackFunction) })
试试 $("#item").live("click", function() { alert("test"); });

标签： javascript jquery binding

【解决方案1】：

试试看

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

【讨论】：

【解决方案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"); });
});

【讨论】：