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帮助器在public / javascripts / 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();
  });
});

更新它似乎不是一个“表嵌套”问题，但是UI Dialog“状态/事件”很重要，实际上打破了模态形式的功能就足够了两个相同的链接，即使外表：

  <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 Dialog可能假设此选择器中只有一个元素：$('#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) {
  ...
});

Jquery UI对话框模式窗体不会显示在表格内部

1 个答案: