1

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

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

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

我需要为此使用 JavaScript 并且不能只是将用户重定向到另一个网站（主要是因为该操作被大量重复并且变得非常乏味。）。

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

我希望的例子是：

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

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

4

4 回答 4

5

事件对象的target属性会告诉你点击了哪个元素。

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

观看现场演示

于 2013-05-02T16:28:42.517 回答
3

对于 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 中删除时将它们绑定/重新绑定到元素。

于 2013-05-02T16:29:07.890 回答
2

假设有问题的链接都具有相同的类（或已知的类列表），并且您可以使用 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>

于 2013-05-02T16:30:06.033 回答
0

你可以试试这样的；

$( ":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' />

于 2018-03-21T18:45:51.670 回答