3

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

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

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

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

4

3 回答 3

3

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

您可以改用类名。

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

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

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

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

于 2013-01-26T17:18:55.630 回答
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();
  });
于 2013-01-26T17:18:33.377 回答
0

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

于 2013-01-26T17:19:34.443 回答