jquery UI對話框模式不顯示在表格內

Question

Jquery UI Dialog modal-form不在表格內顯示，但在外面工作正常。

這是HAML代碼不工作，最後一行是模式的形式呼叫：

%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 "Add tag", tagging_path, :id => 'add-tag'外表（在上面），工作正常... - （

的助手的link_to調用下面的jQuery代碼在公共/ JavaScript的/ application.js中：

$(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 似乎不是一個「表格嵌套」的問題，但用戶界面對話框「狀態/事件」事，事實上，以打破了模態形式的功能是把足夠的兩個相同的鏈接，即使外面表：

<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樹的一個ID。 jQuery UI對話框可能會認爲在這個選擇器中只有一個元素：$('#add-tag')，這可能是這種情況。快速解決方法是將您的選擇器更改爲$('.button.icon.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) { 
    ... 
});