Question

I’m trying to select a certain link and open a dialog box.

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

On a page with multiple edit links

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

but the code only works when there is only one edit link.

How do I dynamically select the exact link I click on?

Answer 1

ID attributes need to be unique, that is invalid HTML. Browsers will return always the first occurrence.

You can use a classname instead.

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

And, you will need to modify your selector to .edit to find elements by classname.

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

As of HTML5, you can also make use of data-* attributes.