javascript - Passing parameters to Anonymous function inside click event - Stack Overflow

admin管理员组

文章数量:1399887

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

The problem is I cannot pass div_id, chapter_index, chapter as a parameter to the anonymous function inside the click event. I used the debugger and the debugger represents them as undefined values even though they are defined in above code. It seems there is a variable scope problem, however, I cannot figure out any other way to pass the defined variables as a parameter to the anonymous function inside the click event.

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

The problem is I cannot pass div_id, chapter_index, chapter as a parameter to the anonymous function inside the click event. I used the debugger and the debugger represents them as undefined values even though they are defined in above code. It seems there is a variable scope problem, however, I cannot figure out any other way to pass the defined variables as a parameter to the anonymous function inside the click event.

• javascript
• jquery
• function

Share Improve this question Follow edited Jul 14, 2015 at 15:42 lmgonzalves 6,58833 gold badges2323 silver badges4343 bronze badges asked Jul 14, 2015 at 15:40 FreeMindFreeMind 23344 silver badges2222 bronze badges 4

• You don't have to pass it as arguments in the function. Just use the variables it inside – Mike Boutin Commented Jul 14, 2015 at 15:42
• 1 I think you don't need to pass them as argument. Just use them directly in function. Since they are defined in global scope – Amit.rk3 Commented Jul 14, 2015 at 15:43
• @MikeBoutin I have included the code. I am just trying to append an input field into my form whenever the button is clicked, what is confusing you exactly? – FreeMind Commented Jul 14, 2015 at 15:44
• 1 .on( events [, selector ] [, data ], handler ) -> data: "Data to be passed to the handler in event.data when an event is triggered." – Andreas Commented Jul 14, 2015 at 15:45

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

You don't need to pass the variables defined at the beginning as parameters, simply use it inside the function:

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

You can pass anything (no string as it would be used as selector, preferable an object) you want to your event handler.

See the documentation of .on( events [, selector ] [, data ], handler ) for further infos on the data parameter

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

Thanks to JS Closures Your click handler is defined at the same level as the variables div_raw_id, div_id, div_raw_id, chapter_index, chapter.

This means that if you give the callback function arguments with the same name the callback function can no longer see the external ones with the same name.

So chapter_index Should still be defined. The first argument chapter will be the first parameter that jQuery passes through (The Event Object) the last 2 will be set to undefined.

本文标签： javascriptPassing parameters to Anonymous function inside click eventStack Overflow