jquery - 如何使用 Jquery 动态选择特定链接？

Question

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

  $('#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>

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

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

Answer 1

ID 属性需要唯一，即无效的 HTML。浏览器将始终返回第一个出现的位置。

您可以使用类名来代替。

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

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

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

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