call jquery function from button (not using onclick)

Question

I made a function in jQuery to edit database information based on ID from a specific table.

clickme(id);

That function was called in the onclick event but it seems that's a bad pratice. My code to call the function was created in PHP so it lists automatically the ID in the function. For example, it fetches the database and list all ID's available, creating automatically a link based on ID:

<button ... onclick='clickme(1)'...</button>
<button ... onclick='clickme(2)'...</button>
<button ... onclick='clickme(3)'...</button>

Since it's a bad pratice, how can I make this same working method without using the onclick method? The objetive is using something like sweetalert to:

Click the button that contains the id and call the function
Show a sweetalert to user confirm the action in the id X
Confirm and call the function
Show another sweetalert to show OK or NOK

Anyone can help me in this? It's working with the onclick method, but I'd rather prefer to user another method, but I don't know how can I call the function with the "ID" I need too without this method. Thanks.

Answer 1

You can add an EventListener to all buttons and run the function clickme inside it with a number you get from a data attribute:

 $("button").click(function() { let button = $(this); // the button you clicked let id = button.data("id"); // the data-id attribute of the button clickme(id); }); function clickme(id) { console.log(`Button with id ${id} clicked`); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button data-id="1">Click Me 1</button> <button data-id="2">Click Me 2</button> <button data-id="3">Click Me 3</button> <button data-id="4">Click Me 4</button> 

This way you can still control the ID from PHP, but are not assigning listeners as attributes.

The buttons can also have multiple data- attributes:

 $("button").click(function() { let button = $(this); // the button you clicked let id = button.data("id"); // the data-id attribute of the button let fun = button.data("function"); clickme(id, fun); }); function clickme(id, fun) { console.log(`Button with id ${id} and function ${fun} clicked`); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button data-id="1" data-function="update">Click Me 1</button> <button data-id="2" data-function="active">Click Me 2</button> <button data-id="3" data-function="foo">Click Me 3</button> <button data-id="4" data-function="bar">Click Me 4</button> 

Answer 2

Use jQuery.click()

Give an ID to your input element. Look at below example.

<div id="target">
  Click here
</div>

$( "#target" ).click(function() {
  alert( "Handler for .click() called." );
});

Answer 3

You're correct in that using onclick should be avoided where possible. Instead, use unobtrusive event handlers. You can store the relevant element meta data in a data attribute which you can read in the function itself instead of passing it as an argument.

In JS it would look like this:

 Array.from(document.querySelectorAll('.clickme')).forEach(function(el) { el.addEventListener('click', function() { var foo = this.dataset['foo']; console.log(foo); // perform your logic here... }); }); 

 <button class="clickme" data-foo="1">#1</button> <button class="clickme" data-foo="2">#2</button> <button class="clickme" data-foo="3">#3</button> 

In jQuery it would be this:

 $('.clickme').click(function() { var foo = $(this).data('foo'); console.log(foo); // perform your logic here... }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="clickme" data-foo="1">#1</button> <button class="clickme" data-foo="2">#2</button> <button class="clickme" data-foo="3">#3</button> 

Answer 4

You can also use the onclick function if this doesn't work

$(document).on('click','.clickme',function(){
  let button = $(this); // the button you clicked
  let id = button.data("id"); // the data-id attribute of the button
  clickme(id);
});


function clickme(id) {
  console.log(`Button with id ${id} clicked`);
}