Question

I have multiple dynamically created anchor tags that work as buttons. When any of these buttons are clicked, I want to call a single javascript function that sits in another file, which will do the rest of the fun work. My problem is that I cannot properly call the function via the ‘onclick’ event, so I am trying to find a way around it but it’s just not so simple for me.

I have tried many different ways so I understand a few limitations with this approach:

Standard HTML anchor with Javascript:

<a href=#" onclick="doSomething(parameter1, parameter2, ...);">Button</a>

This is not going to help because there are synchronization issues and I have found that href will be chosen above on click almost always I have found. I actually would love this way to work, if you know any workarounds here then please let me know.

Binding via JQuery:

$(document).ready(function() {
     $("#button_id").click(function() {
         doSomething(parameter1, parameter2, ...);
     });
});

My issue with binding is that when the page is loaded, I have a function that gets the data from the database and displays it in a list. Each list element has a button, which ‘on click’ will call a javascript function, passing it parameters according to whatever data I need to give it from the list element, and it then will do something.

I understand that in order for Binding to work well, each button should have its own ID so that its easy to associate them with the Binding method. However, I am not sure how to tell the the .click function how many ID’s I have, nor how to give it these parameters (unless I capture them via button ID by calling other JS functions).

Any suggestions/ideas are highly appreciated!

EDIT:
How do I go about adding the button_data to the parameters of the ‘doSomething(parameter);’ function?

list_element = '<span class="ui-li-count" data-mini="true">' + button_data + '<a href="#" class="my_button">Button</a>';</span>

Please remember this data is obtained dynamically from the database and posted onto the site when the page is first loaded.

Answer 1

There is no need to use an id for this. That’s the opposite of what you need to be doing since you are giving a group of element identical functionality. Instead, you should be giving them a class to group them:

<a href=#" class="my-button">Button</a>

And the JavaScript:

$(document).ready(function() {
     $('body').on('click', '.my-button', function() {
         doSomething(parameter1, parameter2, ...);
     });
});

This will bind the click event to all .my-button elements, even ones that you haven’t created yet. Replace body with the parent element that contains all of the buttons to make this work a bit faster.