Jquery grouping event listeners for dynamically added elements

Asked Jul 29 '19 at 11:27

Active Jul 29 '19 at 12:12

Viewed 55 times

After reading this comment, I changed the way I handled specific events in my application.

However, I ended up with a lot of code that seems "similar", and I was wondering if there's a way to group multiple event listeners that happen on the same parent.

Here's an example of 3 different buttons that submit some form. The buttons are added dynamically and not all of them might be available all the time.

const parentElement = $('#myBlock')
parentElement.on("submit", "form[data-action='button-1']", (evt) => {
  //do something
});

parentElement.on("submit", "form[data-action='button-2']", (evt) => {
  //do something else
});

parentElement.on("submit", "form[data-action='button-3']", (evt) => {
  //do magic
});

Is there a better way of handling this?

edited Jul 29 '19 at 12:12

asked Jul 29 '19 at 11:27

Erythros

All the event would do the same thing..? – Rohit Sharma Jul 29 '19 at 11:39
No, each does something else – Erythros Jul 29 '19 at 12:12
Then obviously you need to attach the event for each form separately..! – Rohit Sharma Jul 29 '19 at 12:19
In other words, there is no better way? – Erythros Jul 29 '19 at 12:41
You can attach the events at once though, but nevertheless, you need to handle the form submission conditionally inside the handler function..! :) – Rohit Sharma Jul 29 '19 at 12:43

Jquery grouping event listeners for dynamically added elements

0 Answers0