Question

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事件中的匿名函数。我使用了调试器，调试器将它们表示为未定义的值，即使它们是在上面的代码中定义的。似乎存在一个变量范围问题，但是，我无法想出任何其他方法将定义的变量作为参数传递给click事件中的匿名函数。

Answer 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;
});

Answer 2

您可以向事件处理程序传递任何内容（没有字符串，因为它将用作选择器，更可取的是对象）。

有关.on( events [, selector ] [, data ], handler )参数

的更多信息，请参阅data的文档

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;
});

Answer 3

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

这意味着如果您给回调函数参数赋予相同的名称，则回调函数将无法再看到具有相同名称的外部参数。

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

将参数传递给Click事件中的Anonymous函数

3 个答案: