从按钮调用jquery函数（不使用onclick）

Question

我在jQuery中创建了一个函数，用于基于特定表中的ID编辑数据库信息。

clickme(id);

该函数在onclick事件中被调用，但这似乎是一个糟糕的实践。 我的调用该函数的代码是用PHP创建的，因此它会自动列出该函数中的ID。 例如，它获取数据库并列出所有可用的ID，并根据ID自动创建一个链接：

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

由于这是很糟糕的做法，我如何不使用onclick方法而做出相同的工作方法？ 该对象使用诸如sweetalert之类的东西来：

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

有人可以帮我吗？ 它与onclick方法一起使用，但是我宁愿使用另一种方法，但是我不知道如果没有该方法，我怎么也需要带有“ ID”的函数。 谢谢。

Answer 1

您可以将EventListener添加到所有按钮，并使用从data属性获得的数字在其中运行clickme函数：

 $("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> 

这样，您仍然可以从PHP控制ID，但不将侦听器分配为属性。

这些按钮还可以具有多个data-属性：

 $("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

使用jQuery.click()

给您的输入元素一个ID。 看下面的例子。

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

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

Answer 3

您是正确的，应尽可能避免使用onclick 。 而是使用不引人注目的事件处理程序。 您可以将相关元素的元数据存储在data属性中，您可以在函数本身中读取该属性，而不必将其作为参数传递。

在JS中，它看起来像这样：

 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> 

在jQuery中将是这样的：

 $('.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

如果这不起作用，您还可以使用onclick函数

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