我正在使用JQuery和javascript创建一个表。我也成功地为每一行绑定方法但是当我尝试绑定dblclick事件时,它总是使用最后一行的值(在这种情况下是列表中的最后一个客户) ):
for (var i = 0; i < customers.length; i++) {
var newRow = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
newRow.attr('onmouseover', 'rowMouseOver_Popup(' + i + ');');
newRow.attr('onmouseout', 'rowMouseOut_Popup(' + i + ');');
newRow.attr('onclick', 'rowSelect_Popup(' + i + ');');
//above is working fine
//below (adding the dblclick) doesn't work
newRow.dblclick(function () {
selectCustomer(customers[i].Cust_Code, customers[i].Cust_Name);
});
newRow.appendTo(tbl);
}
我尝试了下面的一些变化,但没有这样的运气:
newRow.on('dblclick', 'selectCustomer(\'' + customers[i].Cust_Code + '\'' + ',' + '\'' + customers[i].Cust_Name + '\');');
newRow.attr('dblclick', 'selectCustomer(' + customers[i].Cust_Code + '\'' + ',' + '\'' + customers[i].Cust_Name + '\');');
我想这是函数调用的范围或上下文,我不明白,如果你可以添加一个链接到你的答案,所以我可以了解更多关于问题/解决方案我会非常感激。< / p>
提前致谢
答案 0 :(得分:1)
你的问题是你在每个i上重置处理程序,所以监听器在循环结束时将最后一个作为参数。
使用ondblclick,因为您已经使用了内联事件处理程序:
var code = customers[i].Cust_Code,
name = customers[i].Cust_Name;
newRow.attr('ondblclick', 'selectCustomer(' + code + ',' + name + ')');
在您的情况下,您可以使用委托侦听器:
for (var i = 0; i < customers.length; i++) {
var newRow = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
newRow.attr('index', i);
newRow.appendTo(tbl);
}
现在使用jquery设置侦听器:
$('tr[index]').on('click',rowSelect_Popup($(this).attr('index')))
.on('onmouseover',rowMouseOver_Popup($(this).attr('index')))
.on('onmouseout',rowMouseOut_Popup($(this).attr('index')))
.on('ondblclick',function() {
var i = $(this).attr('index'),
code = customers[i].Cust_Code,
name = customers[i].Cust_Name;
selectCustomer(code,name);
})
根据我的经验,最好使用mouseenter和mouseleave事件而不是mouseover和mouseout。但这取决于你。
答案 1 :(得分:1)
我认为这更好。
/**
* In this case using on is much better.
* check this:
* http://api.jquery.com/on/
*/
newRow.on("dblclick", {Cust_Code: customers[i].Cust_Code,
Cust_Name: customers[i].Cust_Name}, function(event) {
selectCustomer(event.data.Cust_Code, event.data.Cust_Name);
});
答案 2 :(得分:0)
试试这个。
newRow.ondblclick=function(){ SomeJavaScriptCode };