如何使用 Jquery 动态选择特定链接？答案

【问题标题】：How do I dynamically select a specific link with Jquery?如何使用 Jquery 动态选择特定链接？
【发布时间】：2013-01-26 17:15:29
【问题描述】：

我正在尝试选择某个链接并打开一个对话框。

  $('#edit').click(function(e) {
    var url = $(this).attr('href');
    var dialog_form = $('<div id="dialog-form">Loading form...</div>').dialog({
      autoOpen: false,
      width: 520,
      modal: true,
      open: function() {
        return $(this).load(url + ' #content');
      },
      close: function() {
        $('#dialog-form').remove();
      }
    });
    dialog_form.dialog('open');
    e.preventDefault();
  });

在具有多个编辑链接的页面上

<a href="articles/edit/1" id="edit">edit</a>
<a href="articles/edit/2" id="edit">edit</a>

但该代码仅在只有一个编辑链接时才有效。

如何动态选择我点击的确切链接？

【问题讨论】：

标签： jquery ruby-on-rails jquery-ui jquery-ui-dialog

【解决方案1】：

ID 属性必须是唯一的，即无效的 HTML。浏览器将始终返回第一次出现。

您可以改用类名。

<a href="articles/edit/1" class="edit">edit</a>

而且，您需要将选择器修改为 .edit 才能按类名查找元素。

$('.edit').click(function(e) {
  ... 
});

从 HTML5 开始，您还可以使用 data-* 属性。

【讨论】：

这已经成功了，谢谢！你知道为什么 hohner 的建议不起作用吗？（使用“on”而不是“click”）
@DanielSunYang，你使用的是什么版本的 jQuery？无论如何，这个建议是没有根据的，因为.click() 在内部使用.on()。您可以使用.on() 进行事件委托，这显然不会发生在您的代码和他的回答中
啊，你是对的。我正在使用某人的示例应用程序，它有“jquery v1.6.1”。感谢您的澄清。
@DanielSunYang，您可以正常使用.click()，因为此速记应使用推荐的方式将事件处理程序与您当前的版本绑定。虽然，总是推荐升级 jQuery
现在我陷入了从两个正确答案 D: 中选择的困境中，我为自己挖的坑......

【解决方案2】：

首先，不要使用重复的 ID 属性 - 它们应该对于 DOM 中的每个元素都是唯一的。如果您需要选择器，请改用类名：

<a href="articles/edit/1" class="edit">edit</a>
<a href="articles/edit/2" class="edit">edit</a>

其次，用on()代替click()：

$('.edit').on('click', function(e) {
    var url = $(this).attr('href');
    var dialog_form = $('<div id="dialog-form">Loading form...</div>').dialog({
      autoOpen: false,
      width: 520,
      modal: true,
      open: function() {
        return $(this).load(url + ' #content');
      },
      close: function() {
        $('#dialog-form').remove();
      }
    });
    dialog_form.dialog('open');
    e.preventDefault();
  });

【讨论】：

我不同意，但使用.on() 代替.click() 没有任何优势
我不知道为什么，但是“on”不起作用，但“click”似乎与您提到的 id to class change 一起使用。
@DanielSunYang 您需要使用 on() 因为 click() 已被弃用。更新你的 jQuery 版本，你就可以使用它了。
@Alexander 因为将来他很可能想要访问动态添加元素的事件
@hohner，您能否提供参考.click() 的弃用通知？对不起，我觉得你有点困惑

【解决方案3】：

具有相同 id 的两个元素是无效的 HTML。改用类。

【讨论】：