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-*属性。

Answer 2

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

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

Answer 3

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

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

3 个答案: