重新打開加載的jQuery div對話框

我有一個按鈕，單擊時將一個外部頁面（同一個域）加載到div中，並將該div顯示爲一個jQuery UI對話框。重新打開加載的jQuery div對話框

<div id="Dialog_box"></div> 

<script type="text/javascript"> 
    $(function() { 
     $("#Dialog_box").dialog({ 
      autoOpen: false, 
      modal: true, 
      width: 500, 
      height: 400, 
      title: "Dialog", 
      close: function(event, ui) { 
       $("#Dialog_box").html(""); // Ensure the page is no longer loaded 
      } 
     }); 
    }); 

    function openDialog() { 
     $(document).ready(function() { 
      $("#Dialog_box").load("dialog.php").dialog('open'); 
     }); 
    } 
</script> 

<button onclick="openDialog();">Open Dialog</button>

第一次單擊按鈕時，它打開罰款。關閉它後，它不會再回來。

首先，我證實，它實際上是在命中「X」

$("#Dialog_box").dialog({ 
    ... 
    close: function(event, ui) { 
     alert("Closed"); 
    } 
});

被關閉，並正在顯示的警報。然後，我用我的正常代碼嘗試，但在頁面

$("#Dialog_box").dialog('open');

沒有加載在這一點上，該對話框會啓閉正常，沒有任何問題。雖然我不認爲它應該的問題，我甚至試圖分離出負載和對話再次命令

function openDialog() { 
     $(document).ready(function() { 
      $("#Dialog_box").load("dialog.php"); 
      $("#Dialog_box").dialog('open'); 
     }); 
    }

，該框將顯示第一次，但之後就不會再出現。

我的外部文件基本上是這樣的

<link type="text/css" href="path/to/style.css" rel="stylesheet" /> 
<script type="text/javascript" src="path/to/jquery.js"></script> 
<script type="text/javascript" src="path/to/jquery-ui.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#Submit_button").click(function() { 
     // Do stuff with form data 
     // POST data without changing page 
    }); 
}); 
</script> 

<form action=''> 
    // Input fields 
    <input type="button" id="Submit_button" /> 
</form>

只是爲了澄清，出現問題我是否張貼我的形式。

爲什麼加載（以及我的理解，卸載）頁面後，對話框不會重新打開？

來源

2011-06-02 Mike C

刪除行以從外部文件中嵌入jquery.js。這行代碼會再次加載jQuery，覆蓋現有的jQuery，這會破壞已經實例化的對話框對象，因爲它被註冊在被覆蓋的jQuery實例中。爲了說明：您不需要再次嵌入jquery和jqueryui，因爲如果使用$ .load（），返回的片段將是請求文檔（它們已經存在）的DOM的一部分。

來源

2011-06-02 23:31:00

太棒了！這工作完美。我假設對話框像iframe一樣，必須被視爲基本上獨立的實體。謝謝你清理那個。 – 2011-06-06 12:49:58

$(function() { 
     $("#btnCallCompany").button().click(function() { 
      $("#divOpenConversation").dialog({ 
       autoOpen: true, 
       height: 500, 
       width: 650, 
       modal: true 
       }); 

      $.get("/Conversation.aspx",function(data){ 
       $("#divOpenConversation").html(data); 
      }); 
     }); 
    });//end func

來源

2012-03-29 13:38:33 ariel

重新打開加載的jQuery div對話框

回答

相關問題