0

我正在尝试构建一个 jquery 函数，该函数构建一系列按钮并将它们绑定到具有不同参数值的回调。我遇到的问题是，无论单击哪个按钮，始终使用最后一个按钮 [] 值“取消”的参数值调用回调。

var buttons = ["OK|ok", "Cancel|cancel"];
buildButtons(buttons, function(response){
    alert(response);
});

function buildButtons(buttons){
    for (i = 0; i < buttons.length; i++){
        var btnTitle = buttons[i].split("|")[0];
        var btnName = buttons[i].split("|")[1].toString();
        var btnElem = $('<button/>', {
            type: 'button',
            id: 'btn_' + btnName,
            html: btnTitle,
        })

        $(btnElem).on('click', function () {
            //..some other code
            fnResponse(btnName); //<<------- Issue Should return 'ok' or 'cancel'
        });
    }
}

问题是回调总是使用最后一个元素的值 [btnName] 调用。无论单击哪个按钮。

4

2 回答 2

0

我在这里重现了这个问题：http: //jsfiddle.net/makque/zgHGc/ 我还包含了一个日志元素，这样我们就可以看到代码中到底发生了什么。

如果您尝试运行代码，我们可以看到for循环已执行，您可以看到在我们的日志元素中，仅#menu执行了按钮的创建和添加。并且事件处理程序的代码 [inside] 被跳过了......

因此，这证明了事件处理程序的定义是正确的：

JavaScript 可以在事件发生时执行，例如当用户单击 HTML 元素时。

要在用户单击元素时执行代码，请将 JavaScript 代码添加到 HTML 事件属性：

onclick=JavaScript

为了证明这一点，当我们单击按钮时，代码将唯一运行（正如我们的日志所证明的那样）......

与问题有关： 局部变量或与此相关的任何变量（即，在 for 循环内将保留它的最后一个给定值）

这意味着……例如，在

调用 0=i: 如果var a = i；a=0

在通话 1=i 时： 的值var a = i；a=1

因此，当你使用循环的局部变量运行事件处理程序代码时，当循环已经执行时，它会给你它的当前值，在我们的例子中是 CANCEL ...

那么我们该如何解决这个问题呢？& @&$!

在代码执行过程中for loop，所有满足条件的代码行都被执行，这意味着对于这些代码行：

1 $(btnElem).on('click', function () {
2    ...
3    alert(btnName);
4 });

第 1 行和第 4 行被执行，而第 2 行和第 3 行没有被执行，因为它们不满足条件：点击时

运行第 1 行和第 4 行意味着按钮元素已经注册它有一个 Eventhandler onclick，并且正在等待执行。

总之，原因：使用错误的变量解决方案：在上下文中使用变量

$(btnElem).on('click', function () {
    fnResponse($(this).html()); //passes the button's title
});

最后，我们可以有这样的代码：http: //jsfiddle.net/makque/mq9cJ/

希望我有所帮助！:)

于 2013-01-28T00:07:47.623 回答
0

您需要更改每个文字的上下文。你可以用 jQuery 做到这一点each：

function buildButtons(buttons, fnResponse){
    $.each(buttons, function(index, button)) {
        // wrapped into diffent function, context changed
        var btnTitle = button.split("|")[0];
        var btnName = button.split("|")[1].toString();
        var btnElem = $('<button/>', {
            type: 'button',
            id: 'btn_' + btnName,
            html: btnTitle,
        });

        $(btnElem).on('click', function () {
            //..some other code
            fnResponse(btnName); //<<------- Issue Should return 'ok' or 'cancel'
        });
    });
}

另一种解决方案：https ://gist.github.com/4650951

为什么需要另一个函数的一些简单示例：http: //jsfiddle.net/nYmtV/

于 2013-01-27T22:21:14.190 回答