Jquery UIダイアログ表内にモーダルフォームが表示されない

Question

Jquery UI Dialog modal-form表内には表示されませんが、外側はきれいです。

はこれが最後の行は、モーダルフォームの呼び出しのためであり、著作ないHAMLコードです：、私は（上）= link_to "Add tag", tagging_path, :id => 'add-tag'外のテーブルを置く場合

%table 
    %thead 
     %th= "gravatar" 
     %th= "description" 
     %th= "add tag" 
    %tbody 
     - @watched_repos.each do |repo| 
     %tr.row 
      %td.gravatar 
      = image_tag("#{repo.avatar_url}", :height => '36', :width => '36') 
      %td= repo.description 
      %td= link_to "Add tag", tagging_path, :id => 'add-tag' 

正常に動作します...： - （

のlink_toヘルパーは、パブリック/ JavaScriptの/ application.jsに次のjQueryコードを呼び出す：

$(document).ready(function() { 
    $('#add-tag').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 + ' #tagging'); 
     } 
    }); 
    dialog_form.dialog('open'); 
    e.preventDefault(); 
    }); 
}); 

UPDATEそれはそうは、「テーブルのネスト」の問題ではなく、UIダイアログ「状態/イベント」の問題は、Infactは、モーダルフォームの機能も外にテーブル場合、二つの同一のリンクを十分に入れて壊したために：

<td><a href="/tagging" class="button icon tag" id="add-tag" type="submit">Add tag</a></td> 
    <td><a href="/tagging" class="button icon tag" id="add-tag" type="submit">Add tag</a></td> 
    <br> 

    <table> 
    <thead> 
     <th>gravatar</th> 
     <th>repo</th> 
     <th>add tag</th> 
    </thead> 
    <tbody> 
     <tr class='row'> 
     <td class='gravatar'> 
     ... 

最初はJqueryによってハイジャックされています。事前 で

おかげルカ

Answer 1

はHTML DOMツリーに1つのIDが必要です。 jQueryのUIダイアログでは、このセレクタにはただ1つの要素しかないと思われるかもしれません：$('#add-tag')、おそらくそうです。簡単な解決策は、セレクタをに変更することです。

この問題をよりよく解決するには、IDをクラスにしてセレクタを$('.add-tag')に変更する必要があります。例えば

<td><a href="/tagging" class="button icon tag add-tag" type="submit">Add tag</a></td> 

セレクタ変更：

$('.add-tag').click(function(e) { 
    ... 
});