Javascript jQuery不会将单击处理程序绑定到映像
我使用servlet返回的JSON对象数组创建了一个表。我试图使它,以便当我在每一行之前添加的图像上单击时,它将调用一个函数。下面的代码应该可以工作,但它不能,我想我遗漏了一些简单的东西Javascript jQuery不会将单击处理程序绑定到映像,javascript,jquery,binding,Javascript,Jquery,Binding,我使用servlet返回的JSON对象数组创建了一个表。我试图使它,以便当我在每一行之前添加的图像上单击时,它将调用一个函数。下面的代码应该可以工作,但它不能,我想我遗漏了一些简单的东西 $(document).ready(function(){ loadData(); $("#item").bind("click", function() { alert("test"); }); }); function loadData(){ $.
$(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>"
);
});
});
}
试着
$(document).on('click', '#item', function() {
alert("test");
});
加载数据是异步操作,这就是为什么在填充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"); });
});
正在动态加载图像元素。所以你必须绑定点击事件,比如$function{$document.on'click','item',callbackFunction}尝试$item.liveclick,function{alerttest;};