jQuery点击事件立即触发

我正在开发的Web应用程序中有以下代码：

var bgcolor = ''; var row = 0; for(var i = 0; i < result.data.length; i++) { // Set alternating background colors bgcolor = ( i%2 == 0) ? ' style=\'background-color: white;\'': ' style=\'background-color: whitesmoke;\''; $( "div.row" ).append("\ 
\ 
"+result.data[i]['client_name']+"
\ 
"+result.data[i]['industry_name']+"
\ 
Saved: "+result.data[i]['actual_impact']+" "+result.data[i]['impact_type_name']+" / "+formatCurrency(String(result.data[i]['actual_savings']))+"
\ 
"+nl2br( result.data[i]['problem'] )+"
\ 
\ View details »\ 
\ 
"); $( "#view_results_"+result.data[i]['record_id'] ).click( show_result_dialog(i, result) ); } 

然后是一个单独的命名函数，它根据单击的按钮简单地用不同的值填充创建的div：

 function show_result_dialog(row, result) { $( "#search-result-dialog-client" ).empty().append("
Client
"+result.data[row]['client_name']+"
"); $( "#search-result-dialog-industry" ).empty().append("
Industry
"+result.data[row]['industry_name']+"
"); $( "#search-result-dialog-contact" ).empty().append("
Contact
"+result.data[row]['contact_name']+"
"); $( "#search-result-dialog-journey" ).empty().append("
Journey
"+result.data[row]['journey_name']+"
"); $( "#search-result-dialog-focus_area" ).empty().append("
Focus Area
"+result.data[row]['focus_area']+"
"); $( "#search-result-dialog-problem" ).empty().append("
Problem
"+result.data[row]['problem']+"
"); $( "#search-result-dialog-approach" ).empty().append("
Approach
"+result.data[row]['approach']+"
"); $( "#search-result-dialog-tactics" ).empty().append("
Tactics
"+result.data[row]['tactics']+"
"); $( "#search-result-dialog-delivery_date" ).empty().append("
Delivery Date
"+result.data[row]['delivery_date']+"
"); $( "#search-result-dialog-impact_type" ).empty().append("
Impact Type
"+result.data[row]['impact_type_name']+"
"); $( "#search-result-dialog-estimated_impact" ).empty().append("
Estimated Impact
"+result.data[row]['estimated_impact']+" "+result.data[row]['impact_type_name']+"
"); $( "#search-result-dialog-actual_impact" ).empty().append("
Actual Impact
"+result.data[row]['actual_impact']+" "+result.data[row]['impact_type_name']+"
"); $( "#search-result-dialog-estimated_savings" ).empty().append("
Estimated Savings
"+formatCurrency(String(result.data[row]['estimated_savings']))+"
"); $( "#search-result-dialog-actual_savings" ).empty().append("
Actual Savings
"+formatCurrency(String(result.data[row]['actual_savings']))+"
"); $( "#search-result-dialog-nps" ).empty().append("
NPS
"+result.data[row]['nps']+"
"); $( "#search-result-dialog-keywords" ).empty().append("
Keywords
"+result.data[row]['keywords']+"
"); $( "#search-result-dialog" ).dialog( "open" ); return false; } 

在代码result是一个由AJAX调用返回的数据数组（此代码全部在成功函数中）

我的问题是点击处理程序在页面加载后立即触发。 我希望有人可以向我解释为什么会这样，如果有办法绕过那个，因为我需要传递该函数的i值来自循环，所以如果我在click事件中包含一个匿名函数，那么我有关闭问题，并始终以最后一个i值结束，因此每个按钮都会打开相同的数据。 我已经尝试了各种技术而没有成功，包括在主匿名函数内返回匿名函数，反之亦然。 我花了最近两天在谷歌试图找到解决方案，到目前为止没有任何工作。

Answer 1

你至少有两个我能看到的问题。

第一个，正如其他海报所标识的那样，并没有围绕对show_result_dialog()的调用编写function() { ... } 。

第二个是使用.on .click不是.on 。 前一种方法（混乱地）用于注册和触发点击处理程序，而后者只能注册 。 如果您使用过.on问题可能会更容易看到。

第三个是你试图在闭包中使用一个循环变量，它永远不会起作用。 i将获得它在循环结束时的最后一个值，而不是调用.click时的值。

对后一个问题最简单的解决方法是使用.on()的data参数来传递所需的参数：

 $("#view_results_" + result.data[i]['record_id'] ).on('click', { row: i, result: result }, show_result_dialog); function show_result_dialog(ev) { var row = ev.data.row; var result = ev.data.result; ... } 

存在其他（更有效的）方法来解决循环问题，但这将起作用并且非常容易理解。

Answer 2

你在这里自己调用这个函数.click( show_result_dialog(i, result) ); 调用函数show_result_dialog()和传递其引用show_result_dialog之间存在差异。

您需要将参数作为事件数据传递：

 .click( {index: i, result: result}, show_result_dialog ); 

或者只是将其包装在匿名函数中：

 .click( function() { return show_result_dialog(i, result) });