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.

Luca Kiebel · Accepted Answer · 2018-08-29 11:03:54Z

2

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>

edited Aug 29, 2018 at 11:03

answered Aug 29, 2018 at 10:54

Luca Kiebel

10.1k7 gold badges34 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tiago Over a year ago

Thanks for this. It works very well. But just another thing, if I have several buttons in the same page working the same way, I need to make some changes, do you suggest to use something like unique and split it? For example, I have button to delete, active. Should the data-id be like delete-1, delete-2 and active-1, active-2 and then split by - and get the first part to select the function and the second part to get the id? Or there is a better way?

Luca Kiebel Over a year ago

You can have data-id and data-function for example. See my edit

Rory McCrossan · Accepted Answer · 2018-08-29 10:56:28Z

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>

Luca Kiebel · Accepted Answer · 2018-08-29 11:36:39Z

0

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." );
});

edited Aug 29, 2018 at 11:36

Luca Kiebel

10.1k7 gold badges34 silver badges47 bronze badges

answered Aug 29, 2018 at 10:51

regex

1011 silver badge9 bronze badges

Comments

executable · Accepted Answer · 2018-08-29 12:40:55Z

0

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`);
}

answered Aug 29, 2018 at 12:40

executable

3,6106 gold badges31 silver badges62 bronze badges

Collectives™ on Stack Overflow

call jquery function from button (not using onclick)

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related