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

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

4 个答案: