從按鈕調用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`);
}