在点击事件中将参数传递给匿名函数答案

【问题标题】：Passing parameters to Anonymous function inside click event在点击事件中将参数传递给匿名函数
【发布时间】：2015-07-14 15:40:27
【问题描述】：

var div_raw_id = 'acf-download-link';
var div_id = '#' + div_raw_id; 
var chapter_index = 1;
var chapter = 'chapter-' + chapter_index;

$('button[name=addnewchapter]').click(function(chapter, div_id ,div_raw_id){
    $(div_id).append('<div class="acf-input-wrap"><input id="' + div_raw_id +'" class="text" name="fields[field_55951fb44c1d6][' + chapter + '][]" value="" placeholder="" type="text"><span class="remove_btn"></span></div>');
    return false;
});

问题是我无法将div_id、chapter_index、chapter 作为参数传递给单击事件中的匿名函数。我使用了调试器，调试器将它们表示为未定义的值，即使它们是在上面的代码中定义的。似乎存在变量范围问题，但是，我想不出任何其他方法将定义的变量作为参数传递给 click 事件中的匿名函数。

【问题讨论】：

您不必在函数中将其作为参数传递。只需使用它里面的变量
我认为您不需要将它们作为参数传递。只需在函数中直接使用它们。因为它们是在全局范围内定义的
@MikeBoutin 我已经包含了代码。我只是想在单击按钮时将输入字段附加到我的表单中，到底是什么让您感到困惑？
.on( events [, selector ] [, data ], handler ) -> data: "触发事件时要在 event.data 中传递给处理程序的数据。"

标签： javascript jquery function

【解决方案1】：

不需要将开头定义的变量作为参数传递，只需在函数内部使用即可：

var div_raw_id = 'acf-download-link';
var div_id = '#' + div_raw_id; 
var chapter_index = 1;
var chapter = 'chapter-' + chapter_index;

$('button[name=addnewchapter]').click(function(){
    $(div_id).append('<div class="acf-input-wrap"><input id="' + div_raw_id +'" class="text" name="fields[field_55951fb44c1d6][' + chapter + '][]" value="" placeholder="" type="text"><span class="remove_btn"></span></div>');
    return false;
});

【讨论】：

这是可行的，因为这些变量已被匿名函数在闭包中捕获。
噢！我非常感谢。我只是 javascript 的新手。我想知道为什么会允许这样的事情，我们是否允许在新创建的函数内使用函数定义变量之外的变量，为什么允许这样的事情？
@FreeMind - 了解闭包。
这可能不是您想要的答案，您可以访问变量，但这些变量的值并不固定为您可能认为的值。尝试在点击定义后添加语句chapter = 'chappie -' + chapter_index 然后点击按钮。

【解决方案2】：

你可以将任何你想要的东西（没有字符串，因为它会被用作选择器，最好是一个对象）传递给你的事件处理程序。

有关data 参数的更多信息，请参阅.on( events [, selector ] [, data ], handler ) 的文档

var eventData = {
    "div_id": "acf-download-link"
    ,"chapter": 1
};

$('button[name=addnewchapter]').on("click", eventData, function(e){
    $("#" + e.data.div_id)
        .append('<div class="acf-input-wrap"><input id="' + e.data.div_id + '"'
                + ' class="text" name="fields[field_55951fb44c1d6][chapter-' + e.data.chapter + '][]"'
                + ' value="" placeholder="" type="text"><span class="remove_btn"></span></div>');

    return false;
});

【讨论】：

传递给匿名函数的e 参数是什么？我怎么知道我必须通过这种神秘的论点？
注册的事件处理程序将始终传递一个event 对象作为第一个参数-> Document Object Model Events。 .on()方法的文档中也提到了这一点

【解决方案3】：

感谢JS Closures，您的点击处理程序与变量div_raw_id, div_id, div_raw_id, chapter_index, chapter 定义在同一级别。

这意味着如果你给回调函数的参数同名，回调函数就不能再看到外部的同名参数了。

所以chapter_index 仍然应该被定义。第一个参数chapter 将是jQuery 传递的第一个参数（事件对象），后两个将设置为undefined。

【讨论】：