JQuery对话框：如何在按钮点击事件中找到被单击的按钮

Question

我目前正在为jquery对话框定义一个变量的按钮数量，如下所示：

    var buttonNames = buttonNamesString.split("|");
    var buttonsOpts = {};
    for (i = 0; i < buttonNames.length; i++) {
       buttonsOpts[buttonNames[i]] = function() { $(this).dialog("close");__doPostBack(postbackControlID, buttonNames[i]);}
    }

以下是初始化对话框的代码。请注意，使用了 buttonsOpts 参数传递了不确定数量的按钮。

var parentElement = popupControl.parent();            
            popupControl.dialog({ 
                                autoOpen: false, 
                                modal: true,
                                buttons: buttonsOpts,                                
                                hide: "explode",
                                open:function(type, data){
                                    $(this).parent().appendTo(parentElement);  
                                    popupControl.css({visibility: "visible"});                                          
                                }  
                                });

问题是当对话框中的按钮被点击时，由于i已经增加到最大值，因此buttonNames[i]返回空值。

函数如下：function() { $(this).dialog("close");__doPostBack(postbackControlID, buttonNames[i]);}

我们能否像在.Net事件中使用sender对象那样，在Javascript中从事件代码内部访问触发事件的对象。这将解决问题。

请问我该如何克服这个问题？谢谢。

- Harindaka

Answer 1

问题在于您正在使用循环迭代变量的闭包。通过改变索引的作用域，可以解决这个问题。

for (i = 0; i < buttonNames.length; i++) {
       var index = i;
       buttonsOpts[buttonNames[index]] = function() { $(this).dialog("close");__doPostBack(postbackControlID, buttonNames[index]);}
    }

你问题的更详细答案是，你正在生成所有引用同一数字变量 i 的函数。因此，在循环结束时，所有函数都设置为buttonNames.length。由于在buttonNames [buttonNames.length]上没有定义数组中的任何按钮，因此你会得到undefined。

注意：在buttonOpts [buttonNames [index]]处的temp变量不是必需的，它只是为了保持一致性。

- Marc