JQuery UI Dialog модальная форма не отображается внутри таблицы

Question

Модальная форма JQery UI Dialog не отображается внутри таблицы, но прекрасно работает снаружи.

Это код 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 в public / javascripts / 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 должен быть только один идентификатор.Диалоговое окно jQuery UI вполне может предполагать, что в этом селекторе есть только один элемент: $('#add-tag'), что, вероятно, имеет место.Быстрое решение состоит в том, чтобы изменить ваш селектор на $('.button.icon.tag').

Чтобы лучше решить эту проблему, вы должны сделать идентификатор класса и изменить селектор на $('.add-tag').Например,

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

И изменить селектор:

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