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>

ただし、コードは編集リンクが1つしかない場合にのみ機能します。

クリックした正確なリンクを動的に選択するにはどうすればよいですか？

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を持つ2つの要素は無効なHTMLです。代わりにクラスを使用してください。

于 2013-01-26T17:19:34.443 に答える