Why does not the event binding in jquery array elements?

Trying to make the forms automatically were on the page, and to them were attached the event handler, but there is a problem when the page is several forms. This code for some reason does not want to register all handlers, and instead registers all the buttons a handler for the event, which is the last in the array.

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

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

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


What could be the problem? Tell me, please
August 23rd 19 at 10:33
4 answers
August 23rd 19 at 10:35
Solution
Also don't see the problem in this code, at least at first glance, but I can offer a slightly different implementation. If you put a single class for all such keys, it is possible to do something like this :

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


Should work.

PS you Can still put a check for action in the event array
I'm afraid that will not work in my code to put a single class for all buttons. My original idea is that on the page there are three elements with id action_form, action_btn, action_info, and all of these elements of the machine are working with a function that sends it all via ajax.
That is, initially there was a function that searches all these elements with such id and checks whether they are all on the page.
And then it turns out that when you want to bind multiple buttons to the handler, then there is some stupid error and binds only the last button.
Now just wondering what could be the problem - mckenna commented on August 23rd 19 at 10:38
I think it's all in kaleke, when completed, the action is already equal to the last element. I offer my line with a discovery action to insert before Your form submission. toast should be so
$('button#' + action + '_btn').bind('click',
 function () {
 var action = $(this).attr('id').slice(0,-4);
sendForm(action);
 });
- kali27 commented on August 23rd 19 at 10:41
: thank you for the tip on point, I found what I was looking for in the documentation of jquery. It was necessary to the function handler to pass the variable. - mckenna commented on August 23rd 19 at 10:44
August 23rd 19 at 10:37
Solution
Thanks everyone, found the answer in the office. documentation.
Just needed to pass parameters to a function in a smarter fashion.

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);
});
}
August 23rd 19 at 10:39
You have multiple buttons with the same unique id.
Button 1
button id="pay_btn" class="waves-effect waves-light btn-large"

Button 2
button id="insert_btn" class="waves-effect waves-light btn-large" - mckenna commented on August 23rd 19 at 10:42
: and problems arise when there is another form with the same buttons? - kali27 commented on August 23rd 19 at 10:45
: Yes, if ask this:
var actions = ["action2", "action1"]
it is tied will be the event, standing the last in the array, i.e. action1 now - mckenna commented on August 23rd 19 at 10:48
August 23rd 19 at 10:41
why not make a handler for a group of elements, and further in the event.target to the active element and get rid of the hemorrhoids?
So this group of elements to get right. And there is a sense initially that I only write markup that is put on elements the right elements and the function machine creates a handler on the elements that are found. There is actually and onclick in the button tag will be the norm to work without complications , but I want to make plans - mckenna commented on August 23rd 19 at 10:44

Find more questions by tags JavaScriptjQuery