對話框內的對話框呈現N次超過自己

使用ASP.NET MVC 4，jQuery 1.6.2，jQuery UI 1.8.11。目前在Firefox 16.0.2中進行調試。對話框內的對話框呈現N次超過自己

我正在努力使這個工作，所以我有一個可重用的jQuery UI模式對話框autoOpen: false從主頁面打開。到現在爲止還挺好。這個可重用的jQuery UI對話框將打開一個新的模式對話框，隨後在需要的時候再次銷燬並創建它（我試圖讓另一個可重用，但是我失敗了，它在第一個對話框中一直顯示爲div，而不是作爲一個新的單獨對象對話框，因此最終我決定在每次需要時創建它）。

當我第一次打開第一個對話框時，我可以打開並關閉第二個對話框，沒有任何問題。但是，當我關閉第一個對話框並再次打開時，會出現問題。它的行爲就像我打開第一個對話框的次數一樣多了對話框佔位符div。雖然我很確定我銷燬了第二個對話框，並且每次關閉它時都會移除佔位符div。

我已將對話框代碼放入/Views/Shared/_Layout.cshtml文件中，並且該佈局文件由主頁面引用。對於那些不熟悉ASP.NET MVC的人來說，佈局文件是一個共享文件，其中包含頁眉，頁腳和其他用於定義網頁佈局的html元素，以便您可以從網站中的任何View中引用它。所以這個佈局與任何引用該佈局的View都一起呈現。

這裏是在我的佈局文件中的（僞）代碼：

<html> 
    <head> 
     <script type="text/javascript"> 
      $.ajaxSetup({ cache: false }); 
      $(document).ready(function() { 
       $("#veliki").dialog({ 
        close: function() { 
         $("#veliki").html(""); 
         $("#maleni").dialog("destroy"); 
         $("body").find("#maleni").remove(); /* a desperate attempt to remove ALL divs which hold the 2nd dialog, was just: $("#maleni").remove(); */ 
        }, 
        modal: true, 
        height: 600, 
        width: 800, 
        left: 0, 
        autoOpen: false 
       }); 

       $(".openDialog").live("click", function (e) { 
        e.preventDefault(); 
        $("#veliki").load($(this).attr('data-url')); 
        $("#veliki").dialog("open"); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="veliki"></div> 
     @RenderBody(); <!-- The ASP.NET MVC view gets rendered here --> 
    </body> 
</html>

與所述第二對話的代碼被放置在其中引用另一個佈局（其不包含任何jQuery的佈局的視圖中的一個碼）。該視圖中的代碼如下：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".openSubDialog").live("click", function (e) { 
      e.preventDefault(); 
      $('<div id="maleni"></div>') 
      .appendTo("body") 
      .dialog({ 
       close: function() { 
        $("#maleni").dialog("destroy"); 
        $("#maleni").remove(); 
        $("body").find("#maleni").remove(); /* delete them all. but where did "they" appear from?! */ 
       }, 
       modal: true, 
       height: 450, 
       width: 600, 
       left: 0 
      }) 
      .load($(this).attr('data-url')); 
     }); 
    }); 
</script>

概括起來：

我通過點擊主頁的鏈接打開#veliki對話框。
我通過單擊第一個對話框中的鏈接創建並打開#maleni對話框。
我關閉了#maleni對話框，破壞它並刪除#maleni div。
我關閉了#veliki對話框。
我打開#veliki對話框，方法是單擊主頁中的另一個鏈接。
我創建並打開了#maleni對話框，它現在神奇地出現了兩次（如FireBug所示）。
我用我的頭撞牆而不解決任何問題。

任何人有想法？

來源

2012-11-29 Dejan Janjušević

爲什麼不使用已經存在的窗口，但內容不同？我創建了這個功能的小提琴：http://jsfiddle.net/scaillerie/wEX42/。

主要的一點是，你不必處理close事件您#maleni窗口：你只用$("#maleni").dialog("close");關閉它，當你再次需要它，你重新打開它：$("#maleni").dialog("open");。

在你的情況下實現的一個例子可以是以下：

佈局頁：

<html> 
    <head> 
     <script type="text/javascript"> 
      $.ajaxSetup({ cache: false }); 
      $(document).ready(function() { 
       $("#veliki").dialog({ 
        close: function() { 
         $("#maleni").dialog("close"); 
        }, 
        modal: true, 
        height: 600, 
        width: 800, 
        left: 0, 
        autoOpen: false 
       }); 

       $("body").delegate(".openDialog", "click", function (e) { 
        $("#veliki").dialog("open").load($(this).attr('data-url')); 
       }); 

       $("#veliki").delegate(".openSubDialog", "click", function (e) { 
        $("#maleni").dialog("open").load($(this).attr('data-url')); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="veliki"></div> 
     @RenderBody(); <!-- The ASP.NET MVC view gets rendered here --> 
    </body> 
</html>

子頁：

<div id="maleni"></div> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#maleni").dialog({ 
       modal: true, 
       height: 450, 
       width: 600, 
       left: 0, 
       autoOpen: false 
     }) 
     .load($(this).attr('data-url')); 
     }); 
    }); 
</script>

來源

2012-11-29 10:15:53

謝謝，很乾淨，很好完成。我嘗試了這樣的事實，不知道爲什麼它不起作用。你只需要改變$（「body」）。delegate（「。openDialog」，「click」，function（e）{'instead of'$（「＃veliki」）。delegate（「。openDialog」，「點擊」，功能（e）{' –

對話框內的對話框呈現N次超過自己

回答

相關問題