jQuery: события, связанные с неправильными элементами в цикле

Question

У меня здесь происходит самая странная вещь, на которую, я уверен, есть совершенно рациональный ответ. Я использую jQuery, который, честно говоря, я не использовал в значительной степени, поэтому я предполагаю, что это мой собственный новичок в работе.

Я отправляю объект настроек функции. Этот объект параметров содержит структуру с именем «функции». Этот «function» -объект является структурой, в которой идентификаторы jQuery являются ключами, а значения - функциями обратного вызова.

Затем в целевой функции (которой отправляется объект settings) я перебираю объект settings.functions, чтобы связать каждую функцию с каждой соответствующей целью.

Однако событие $ button.click () всегда устанавливает для каждого элемента управления последнюю из функций settings.functions.

Итак, если у меня есть 2 кнопки «Удалить» и «Редактировать», и я настраиваю объект настроек так, чтобы у каждой была своя собственная, соответствующая функция ... тогда по причинам, которые я пытаюсь найти, обе кнопки получат функцию «Редактировать». Тестирование показало, что обе кнопки всегда получают последнюю функцию в структуре settings.functions, независимо от ключа.

См. Код "this.init = function ..." для центра странностей. (фрагмент посередине)

Причина, по которой я пытаюсь сделать это таким образом, заключается в том, что в функциях обратного вызова (настроенных в settings.functions) мне нужен доступ к элементу $ resource из предложения $ resources.each (). Другими словами, из библиотечной функции мне нужно отправить объект $ resource обратно в обратные вызовы, где бы они ни были определены.

Вот часть, которая вызывает функцию:

$(document).ready(function() {

    var settings = {
        functions: {
            ".but-act-delete": function($row) {
                if (confirm("Are you sure you want to delete this resource? This action cannot be undone!")) {
                    /* Nevermind this
                    $page_action.val("resource-delete");
                    $resource_id.val($row.attr("resource_id"));
                    $page_form.submit();
                    */
                }
            },
            ".but-act-edit": function($row) {
                window.location = "admin-resource-edit.php?resource_id=" + $row.attr("resource_id");
            }
        }
    };

    var supertable = new SuperTable();
    supertable.init(settings);
});

Вот библиотечная функция:

this.init = function(settings)
{
    var $resources = $("td.act");
    $resources.each(function(index, resource)
    {
        var $resource = $(resource);

        var button_class;
        for (button_class in settings.functions)
        {
            var $button = $resource.find(button_class);

            // This accurately shows ".but-act-edit" or ".but-act-delete"
            alert(button_class);

            $button.click(function()
            {
                // This ALWAYS shows ".but-act-edit"
                alert(button_class);

                // Find the proper callback.
                var func = settings.functions[button_class];

                // Call the call-back with the required element $resource.
                func($resource);
            });
        }
    });
}

Вот HTML-код, о котором идет речь.

<td class="act" resource_id="<?php print $resource_id; ?>">
    <input type="button" class="but-act-edit" />
    <input type="button" class="but-act-delete" />
</td>

Похоже, что $ button.click () каждый раз назначает обработчик событий всем кнопкам, а не только тому, который он находит с помощью $ resource.find (button_class), который возвращает только один ввод каждый раз (как и должно быть) .

Любая помощь высоко ценится. Особенно, если есть способ сделать то, что я делаю, ненужным.

Заранее спасибо.

Answer 1

Это классическая проблема «использования переменной внешнего цикла в обратном вызове».

Ваша переменная button_class изменяется в цикле, но не правильно привязана в обратном вызове, поэтому ее окончательное значение будетвсегда используйте.

Самое простое решение в этом случае - использовать:

$.each(settings.functions, function(button_class, func) {
})

вместо:

for (button_class in settings.functions)

, это обеспечит вашу переменную button_classправильно привязан для каждого возможного значения.

Answer 2

но я думаю, что вы можете упростить свою логику, если я пойму, чего вы пытаетесь достичь, вот так ...

$("td.act").find(":input").click(function(event) {

    var _name = $(event.currentTarget).attr('class');

    if (_name) {
        alert(_name);
    }

});​