Question

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

以下是调用按钮之前的源代码：

First

...拨打按钮1次后：

After 1 call

......之后3次：

After 3 calls

你可以看到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 }  ))%>");

Answer 1

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

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

destroy会破坏对话框，删除会从DOM中删除元素。

Answer 2

jquery-ui对话框的默认行为是将对话框保留在DOM树中，并使用

显示/隐藏它

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

如果要销毁对话框，请致电：

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

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

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

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

ui-dialog框关闭但是html代码仍然在页面上，导致盒子在多次使用盒子时熬夜

2 个答案: