Best method to handle clicks for elements with same ids

Question

I am building a site which allows the user to download files from a folder on the server.

The files are pulled from a database and stored in a HTML table. Each row has a download button. I know i cant just put id='download'.

What would be the best way to handle a JavaScript function when the button is clicked.

Should i set something like download-214124

and then just put ("download-*") as the selector in jQuery?

You can use a class like download.. then a `data-id` attribute to store the id — Arun P Johny, Aug 20 '15 at 01:14

score 3 · Answer 1 · edited May 23 '17 at 11:44

3

As you said you can't use a common ID to all element since ID must be unique.

Instead you can use a common class to all the elements, then use a data-* attribute to store the id like

<button class="download" data-id="1235">Download</button>

then

$('.download').click(function(){
    var id = $(this).data('id');
    //do download code for id here
})

Note: If you are dealing with dynamic elements, then you will have to use event delegation to register the handlers like

$(document).on('click', '.download', function() {
  var id = $(this).data('id');
  //do download code for id here
})

Event binding on dynamically created elements?

edited May 23 '17 at 11:44

Community

1
1

answered Aug 20 '15 at 01:16

Arun P Johny

384,651
66
527
531

For some reason this is not working. By the way the table is loaded after the page loads with ajax. – Blue Dedi Aug 20 '15 at 02:23
If your table data is loaded via ajax, change this code a little bit and it will work: $("#id_of_your_table").on('click', '.download', function () { // do things here }); – Kent Aug 20 '15 at 02:32

score 0 · Answer 2 · answered Aug 20 '15 at 01:29

HTML5 offers data-attribute that allows you to store data respective to the DOM element. This makes life super easy to hook up with JavaScript. jQuery has data() function to access data-attribute of the element.

You can do something like below.

HTML

<table>
    <tr><td>
        <p>file with id 1</p>
        <button data-id="1">download</button>
     </td></tr>
    <tr><td>
        <p>file with id 2</p>
        <button data-id="2">download</button>
    </td></tr>
    <tr><td>
        <p>file with id 3</p>
        <button data-id="2">download</button>
     </td></tr>
</table>

Javascript

$('button').on('click', function(e){
    e.preventDefault();

    var id = $(this).data('id');

    alert('Do ajax request to download file with id ' + id);
});

Here is the jsfiddle for that.

score 0 · Answer 3 · answered Aug 20 '15 at 01:35

If JavaScript is being used to build the HTML table, you can attach the event handlers at runtime without needing any IDs.

A good example of this would be when you're building an HTML structure by looping through an array of results via JavaScript. In such a case, you can use closures to maintain references to the result data that corresponds to particular HTML elements, and use that data when event handlers are invoked.

In the example below, the event handler that is attached to each button is able to directly call up the value property of a corresponding object in an array; we didn't need to add anything to the button element (neither an ID nor a data- attribute) to maintain that reference.

var dataResults = [{title:"One",value:1}, {title:"Two",value:2}, {title:"Three",value:3}, {title:"Four",value:4}];
var output = document.getElementById("output");
for (var i = 0, len = dataResults.length; i < len; i++) { // 1. Loop through results
  var btn = document.createElement("button"); // 2. Create your HTML element(s)
  btn.value = dataResults[i].title; // 3. Set HTML based on result values
  btn.innerHTML = dataResults[i].title;
  (function(result) { // 4. Use a closure to capture the current result item
    btn.addEventListener("click",function() {
        alert("You clicked button " + result.value);
      }); // 5. Add an event handler that references the result item.
  })(dataResults[i]); // (Pass the current result item into the function expression as a parameter)
  output.appendChild(btn); // 6. Add your HTML to the page.
}

<div id="output"></div>

Of course, none of that is relevant if JavaScript isn't responsible for building the HTML in your application!

Best method to handle clicks for elements with same ids

3 Answers3