Question

我有多个 buttons，它正在click event上调用一个函数。在该函数中，我使用一些动态参数绑定change event控件的Radio Button。我能够将更改事件绑定到无线电盒控件。但是无法获得参数值。

function ButtonClickFunction(one, two) {

    $('input[type = "radio"]').change(function (one, two) {

        console.log(one); // shows a radio button object
        console.log(two); // gives undefined
    });
}

我在控制台中获得的是单选按钮对象并且未定义。我确信我做错了什么，但不知道什么？任何帮助将不胜感激。

更新：我有多个按钮调用相同的function，使用给定的答案值变倍。我的意思是我得到了多个价值观。

eg: Passing some integer as variables:
on first button click got 1,2.
and then on second button click got 1,2,3,4.

Answer 1

您应该使用on()，然后使用第二个参数将附加信息传递给处理函数：

$('input[type= "radio"]').on('change', { 'one': one, 'two': two }, function (e) {
    console.log(e.data.one);
    console.log(e.data.two);
});

话虽如此，您应该能够在回调中访问它们，只是不要将它们传递给它：

function ButtonClickFunction(one, two) 
{
    $('input[type="radio"]').change(function () {
        console.log(one);
        console.log(two);
    });
}

Answer 2

匿名函数默认使用event作为第一个参数，因此one的日志记录返回对象的原因。如果您想访问父函数的one和two变量，只需将参数保留在匿名函数之外，并且由于它们的范围如何，您已经具有访问权限。

function ButtonClickFunction(one, two) {
    //EVERYTHING INSIDE THIS FUNCTION HAS ACCESS TO "ONE" AND "TWO
    //INCLUDING YOUR CHANGE EVENT
    $('input[type = "radio"]').change(function (e) {
        //you have access!
    });
}

Answer 3

试试这个：

function ButtonClickFunction(one, two) {

    $('input[type = "radio"]').change(function () {

        console.log(one);
        console.log(two);
    });
}

正如其他人所说，处理函数具有预定义的参数。请阅读.change()

的文档

此外，您的代码显示one的单选按钮对象，因为该处理函数的第一个预期参数是更改的对象（您的单选按钮）。 two显示未定义，因为处理程序只需要一个或没有参数，从而使第二个参数未定义。

Answer 4

好吧，要明确的是，当你调用ButtonClickFunction时，它所做的就是为click事件注册一个新的处理程序，因此当你多次点击时，处理程序会被堆叠并执行。因此，第一次只有一个处理程序，第二次是两个处理程序，依此类推。

诀窍是，在注册新的处理程序之前，只需将处理程序注册从函数中删除或关闭绑定，如

function ButtonClickFunction(one, two) 
{
    $('input[type= "radio"]').off('change').on('change', function (e) {
        console.log(one);
        console.log(two);
    });
}

希望这是有道理的

如何将动态参数传递给单选按钮更改事件

4 个答案: