Почему не работает привязка событий в jquery к элементам массива?

Question

[Roman_S1]

Пытаюсь сделать так, чтобы формы автоматически находились на странице и к ним привязывалcя обработчик событий, но возникла проблема, когда на странице находится несколько форм. Такой код по какой-то причине не хочет регистрировать все обработчики, а вместо этого регистрирует на все кнопки обработчик для события, которое находится последним в массиве.

var actions = ["action1", "action2"]

for (var i = 0; i < actions.length; i++) {
    var action = actions[i];

    $('button#' + action + '_btn').bind('click',
        function () {
            sendForm(action);
        });
}

В чем может быть проблема? Подскажите, пожалуйста

Answer 1

[MrTimon]

Тоже не вижу проблемы в данном коде, по крайней мере на первый взгляд, но могу предложить немножко другую реализацию. Если вы поставите один класс для всех таких кнопок то можно сделать как-то так :

$('button.class_btn').bind('click', function () {
    var action = $(this).attr('id').slice(0,-4);
    sendForm(action);
 });

Должно работать.

ЗЫ Можно еще поставить проверку на наличие action в массиве событий

Comments

[Roman_S1]

Боюсь, что не получится в моем коде поставить один класс для всех кнопок. У меня изначальная задумка в том, что на странице есть три элемента с id action_form, action_btn, action_info и все эти элементы автоматом работают с функцией, которая отправляет это все через ajax.
Т.е. изначально там была функция, которая ищет все эти элементы с такими id и проверяет присутствуют ли они все на странице.
А тут получается, что когда нужно привязать несколько кнопок к обработчику, то появляется какая-то тупая ошибка и привязывает только последнюю кнопку.
Сейчас уже просто интересно в чем же может быть проблема

[MrTimon]

Roman_S1: Я думаю все дело в калбеке, когда восполняется действие action уже равно последнему элементу. Предлагаю мою строчку с обнаружения action вставить перед Вашей отправкой формы. тость должно быть так

$('button#' + action + '_btn').bind('click',
        function () {
            var action = $(this).attr('id').slice(0,-4);
            sendForm(action);
        });

[Roman_S1]

MrTimon: спасибо вам за наводку на мысль, я нашел то, что искал в оф документации jquery. Нужно было в функцию обработчик передать эту переменную.

Answer 2

[Roman_S1]

Спасибо всем, нашел ответ в оф. документации.
Нужно было просто передать параметры в функцию более умным способом.

var actions = ["action1", "action2"];

for (var i = 0; i < actions.length; i++) {
	$('button#' + actions[i] + '_btn').on('click',
		{ action : actions[i] },
		function (event) {
			alert(event.data.action);
			sendForm(event.data.action);
		});
}

Answer 3

[Stepanya]

У Вас несколько кнопок с одинаковым уникальным id.

Comments

[Roman_S1]

Кнопка 1
button id="pay_btn" class="waves-effect waves-light btn-large"

Кнопка 2
button id="insert_btn" class="waves-effect waves-light btn-large"

[Stepanya]

Roman_S1: и проблемы у вас возникают, когда появляется ещё одна форма с такими же кнопками?

[Roman_S1]

Stepanya: да, при этом если задать так:
var actions = ["action2", "action1"]
то привязано будет именно событие, стоящие последним в массиве, т.е. теперь action1

Answer 4

[Виталий]

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

Comments

[Roman_S1]

Так эту группу элементов еще получить надо. А тут смысл изначально в том, что я пишу только разметку, ставлю на элементах нужные элементы а функция уже автоматом создает обработчик на элементах, которые нашла. Там на самом деле и onclick в теге button будет норм работать без головняков , но хочется сделать задуманное