Question

我有一个PHP脚本会抛出一堆按钮（格式以防需要）：

<a class="ClassInfo" id="id">Name</a>

该文件是动态检索的，可以有尽可能多的按钮，可能没有，也可能是一百万（不太可能）。

我需要为此使用JavaScript，并且不能只是将用户重定向到另一个网站（主要是因为操作重复并且非常繁琐。）

我是否可以使用JavaScript + jQuery的某种组合来检测按下了哪个按钮并进行了适当的操作？

我希望的例子是：

用户点击其中一个按钮（具有唯一的ID号）。
JavaScript检测到点击了哪个按钮（我不能只使用固定代码作为按钮的数量，并且id可以随时改变）
JavaScript发出Ajax请求并执行一些奇特的操作（我已经涵盖了这部分）

现在我可以检测到哪个按钮被点击了吗？

Answer 1

事件对象的target属性将告诉您单击了哪个元素。

document.addEventListener('click', function (e) {
  var target = e.target;
  if (target.tagName && target.tagName.toLowerCase() == "a") {
    alert(target.id);
  }
});

请参阅a live demo

Answer 2

对于jQuery解决方案，您可以向元素a.ClassInfo添加点击事件监听器：

$('a.ClassInfo').click(function(event) {
    alert(this.id);
});

// ES6
$('a.ClassInfo').click(event => alert(this.id));

或者更好的是，使用.on

将事件冒泡用于您的优势

$(document).on('click', 'a.ClassInfo', function(event) {
    alert(this.id);
});

// ES6
$(document).on('click', 'a.ClassInfo', event => alert(this.id));

如果动态生成HTML，事件冒泡非常有用。如果绑定到较低级别的元素（在本例中是文档），它可以避免在将元素添加到DOM或从DOM中删除时将事件侦听器绑定/重新绑定到元素。

Answer 3

假设有问题的链接都有相同的类（或已知的类列表），并且您可以使用jQuery：

$('a.ClassInfo').on('click',
  function(event) {
    event.preventDefault();

    var id = this.id;

    console.log('ClassInfo ' + id + ' was clicked');

    // continue with Ajax from here
  }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a class="ClassInfo" id="id1">Name 1</a> -
<a class="ClassInfo" id="id2">Name 2</a> -
<a class="ClassInfo" id="id3">Name 3</a>

Answer 4

你可以尝试这样的事情;

$( ":button, :submit" ).click(function(){
    var id = $(this).attr('id');
    alert('Call post for:'+id);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="t1">T1</button>
<input type='button' value='T2' id='T2' />
<input type='submit' value='T3' id='T3' />

如何为锚点实现通用单击事件

4 个答案: