0

我有一个带有弹出框的页面，用于将tds 替换为 new tds。该框第一次工作正常，但随后每次，该框在点击提交后继续显示。我注意到每次调用该框的 html 都会添加到页面中，但它并没有消失。

这是调用按钮之前源代码的样子：

第一的

...在调用按钮 1 次后：

1 次通话后

... 3 次后：

3次通话后

您可以看到 ui-dialog div 一直在徘徊。

这是控制盒子的 html.erb 文件：

<head>
    <script>  
    $(function() {    
        $( "#dialog" ).dialog();  
        $( ".btn" ).click(function(){
             $( "#dialog" ).dialog("close"); 
        });
    });  
    </script>
</head>
    <body> <div id="dialog" title="Select Item">
        Position <%= @i %><br /><br />   
       <%= form_tag( {:controller => :foos, :action => :update_bar_position, :position => @i , :id => @foo.id }, :remote => true) do %>
            <table>
                <tr>
                    <td>
                        <%= select_tag :position_name, options_for_select(@selection_list) %>
                    </td>
                    <td>
                        <%= hidden_field_tag 'position', @i %>
                        <%= submit_tag "Add" ,:id=> "Add", :class => "btn" %>

                    </td>
                </tr>
            </table>
        <% end %>
       </div>  
    </body>

谁能告诉为什么这个盒子的html代码在第一次使用后仍然存在？谢谢。

这是打开对话框的 js.erb 代码：

$("div#show_selection_box").html("<%= escape_javascript(render(:partial => 'foos/show_selection_box', :locals => { :id => @foo.id, :selection_list => @selection_list }  ))%>");
4

2 回答 2

1

您需要按如下方式更新脚本：

<script>  
$(function() {    
    $("#dialog" ).dialog();  
    $(".btn" ).click(function(){
         $("#dialog" ).dialog('destroy').remove();
    });
});  
</script>

destroy 将销毁对话框， remove 将从 DOM 中删除元素。

于 2013-06-03T15:09:17.017 回答
1

jquery-ui 对话框的默认行为是将对话框留在 DOM 树中，并显示/隐藏它

$('#dialog').dialog('open');
$('#dialog').dialog('close');

如果你想销毁对话框，你应该调用：

$('#dialog').dialog('destroy');

请注意，这只会删除 jquery-ui 在您的'#dialog'节点周围添加的数据。

如果您还想删除节点，您还应该调用：

$('#dialog').remove();
于 2013-06-03T15:09:27.887 回答