Отправка дополнительных переменных с помощью события jquery click

Question

У меня есть куча div, которые, когда они нажимаются, я хочу обновить некоторые данные, связанные с ним. У меня есть событие click, зарегистрированное в div, но я не могу понять, как передать данные в обработчик события click вместе с ним. Я рассмотрел довольно много других подобных SO вопросов, но пока не нашел работающего решения.

Я хочу иметь возможность щелкнуть поле и передать число вместе с ним:

var numbers = ['one', 'two', 'three', 'four'];
var container = document.getElementById('container');

for (var i = 0; i < numbers.length; i++){    
    var checkbox = document.createElement('div');
    checkbox.setAttribute('class','checkBtn');

    var save = function(){
        console.log(numbers[i]);
    }
    $(checkbox).click(function(){
        save();
    });
    container.appendChild(checkbox);
}

http://jsfiddle.net/1qrvxe1j/

Answer 1

Вы должны использовать замыкания... попробуйте его код.

var numbers = ['one', 'two', 'three', 'four'];
var container = document.getElementById('container');

var save = function (arg1) {
    console.log(arg1);
}

var clickEvent = function (i) {
    return function () {
        save(numbers[i]);
    };
}

for (var i = 0; i < numbers.length; i++){    
    var checkbox = document.createElement('div');
    checkbox.setAttribute('class','checkBtn');

    $(checkbox).click(clickEvent(i));

    container.appendChild(checkbox);
}

Answer 2

Вы можете использовать JQuery .each для перебора массива.

$.each(numbers, function(index, num) {
    var checkbox = document.createElement('div');
    checkbox.setAttribute('class','checkBtn');

    $(checkbox).click(function(){
        console.log(num);
    });
    container.appendChild(checkbox);
});