0

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

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("\
        <div class='search_container'"+bgcolor+">\
            <div class='search_result_client_heading'>"+result.data[i]['client_name']+"</div>\
            <div class='search_result_industry_heading'>"+result.data[i]['industry_name']+"</div>\
            <div class='search_result_yield_heading'>Saved: "+result.data[i]['actual_impact']+" "+result.data[i]['impact_type_name']+" / "+formatCurrency(String(result.data[i]['actual_savings']))+"</div>\
            <div class='search_result_problem_heading'>"+nl2br( result.data[i]['problem'] )+"</div>\
            <div class='detail_button_holder'>\
                <a class='btn search_result_button' id='view_results_"+result.data[i]['record_id']+"' href='#'>View details &raquo;</a>\
            </div>\
        </div>");

    $( "#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("<div class='search_result_label'>Client</div><div class='search_result_value'>"+result.data[row]['client_name']+"</div>");
    $( "#search-result-dialog-industry" ).empty().append("<div class='search_result_label'>Industry</div><div class='search_result_value'>"+result.data[row]['industry_name']+"</div>");
    $( "#search-result-dialog-contact" ).empty().append("<div class='search_result_label'>Contact</div><div class='search_result_value'>"+result.data[row]['contact_name']+"</div>");
    $( "#search-result-dialog-journey" ).empty().append("<div class='search_result_label'>Journey</div><div class='search_result_value'>"+result.data[row]['journey_name']+"</div>");
    $( "#search-result-dialog-focus_area" ).empty().append("<div class='search_result_label'>Focus Area</div><div class='search_result_value'>"+result.data[row]['focus_area']+"</div>");
    $( "#search-result-dialog-problem" ).empty().append("<div class='search_result_label'>Problem</div><div class='search_result_value'>"+result.data[row]['problem']+"</div>");
    $( "#search-result-dialog-approach" ).empty().append("<div class='search_result_label'>Approach</div><div class='search_result_value'>"+result.data[row]['approach']+"</div>");
    $( "#search-result-dialog-tactics" ).empty().append("<div class='search_result_label'>Tactics</div><div class='search_result_value'>"+result.data[row]['tactics']+"</div>");
    $( "#search-result-dialog-delivery_date" ).empty().append("<div class='search_result_label'>Delivery Date</div><div class='search_result_value'>"+result.data[row]['delivery_date']+"</div>");
    $( "#search-result-dialog-impact_type" ).empty().append("<div class='search_result_label'>Impact Type</div><div class='search_result_value'>"+result.data[row]['impact_type_name']+"</div>");
    $( "#search-result-dialog-estimated_impact" ).empty().append("<div class='search_result_label'>Estimated Impact</div><div class='search_result_value'>"+result.data[row]['estimated_impact']+" "+result.data[row]['impact_type_name']+"</div>");
    $( "#search-result-dialog-actual_impact" ).empty().append("<div class='search_result_label'>Actual Impact</div><div class='search_result_value'>"+result.data[row]['actual_impact']+" "+result.data[row]['impact_type_name']+"</div>");
    $( "#search-result-dialog-estimated_savings" ).empty().append("<div class='search_result_label'>Estimated Savings</div><div class='search_result_value'>"+formatCurrency(String(result.data[row]['estimated_savings']))+"</div>");
    $( "#search-result-dialog-actual_savings" ).empty().append("<div class='search_result_label'>Actual Savings</div><div class='search_result_value'>"+formatCurrency(String(result.data[row]['actual_savings']))+"</div>");
    $( "#search-result-dialog-nps" ).empty().append("<div class='search_result_label'>NPS</div><div class='search_result_value'>"+result.data[row]['nps']+"</div>");
    $( "#search-result-dialog-keywords" ).empty().append("<div class='search_result_label'>Keywords</div><div class='search_result_value'>"+result.data[row]['keywords']+"</div>");
    $( "#search-result-dialog" ).dialog( "open" );
    return false;
}

代码result中是AJAX调用返回的数据数组（这段代码都在success函数中）

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

4

2 回答 2

1

你在这里自己调用函数调用函数和传递它的引用.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) });
于 2013-04-24T16:05:41.883 回答
0

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

第一个，正如其他海报所指出的那样，不是function() { ... }围绕对show_result_dialog().

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

第三是您试图在闭包内使用循环变量，这永远不会起作用。 i将具有循环结束时的最后一个值，而不是调用时的值.click。

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

$("#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;
    ...
}

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

于 2013-04-24T16:04:54.817 回答