jquery模式對話不會彈出

我試圖創建一個彈出div，當我的應用程序正在完成一項任務時出現。當ajax任務完成時，我想刪除彈出窗口。我一直在評論http://jqueryui.com/demos/dialog/#modal，並試圖實施類似的解決方案。但我無法讓我的div彈出。這裏是我的代碼來創建DIV：在頁面上後jquery模式對話不會彈出

<div id="progress-indicator"> 
    <img src="<?php echo base_url();?>assets/img/wip.gif" /> Please Wait... 
</div>

然後，我有一些JavaScript來隱藏DIV，直到有人點擊一個按鈕：

$(document).ready(function(){ 
$('#progress-indicator').hide(); 
}); 


$('#saveData').live('click', function() { 
//$('#progress-indicator').show(); 
    $("#progress-indicator").dialog({ 
    height: 140, 
    modal: true 
}); 
});

不幸的是，沒有得到點擊保存按鈕時彈出。如果你能告訴我我哪裏出了問題，我會很感激。

謝謝！

編輯：
我知道按鈕點擊事件被激發，因爲在試圖創建一個彈出div之前，我有一行只是使現有頁面內的div可見。那是有效的。因此，例如，下面的代碼工作：

$(document).ready(function(){ 
$('#progress-indicator').hide(); 
}); 

$('#save').live('click', function() { 
$('#progress-indicator').show(); 
});

此代碼工作正常，除了事實上，我希望有一個彈出多數民衆贊成在頁面上居中。

編輯2：順便說一句，我還檢查了Firefox的Web開發者控制檯，並且沒有生成錯誤消息。萬一幫助... 此外，我既包括jQuery和jQuery的用戶界面：

<script src="assets/js/jquery-1.8.1.min.js" charset="utf-8"></script> 
<script src="assets/js/jquery-ui-1.8.23.custom.min.js"></script>

來源

2012-09-10 dot

您能否確認回調火災？我認爲.live（）現在已被棄用。你有沒有試過.on（）？ – d4rklit3

'.live（）'在jQuery 1.7+中被棄用。最好使用'.on（）'。 http://api.jquery.com/on/ – honyovk

1.是的，你需要隱藏div，否則當它加載時它只會坐在你的頁面上。但我會用CSS，而不是在文檔準備好的JavaScript。如果你準備好文檔，你可能會在隱藏之前短暫地看到div。 – jfrank

你太早關閉您的文檔準備。點擊與live或on的綁定應該在文檔中準備就緒。現在您的文檔在第一次隱藏後立即結束。這樣，當點擊事件綁定時，對話框函數尚未加載的可能性很大。

來源

2012-09-10 17:59:24 Tosh

你能給我多一點背景資料/解釋嗎？ – dot

看到我想要等待綁定的答案，直到加載對話框函數。 – Tosh

我修改了文檔，使其包含了所有jquery的東西。同樣的行爲。沒有彈出。我在Firefox中查看了Web開發者控制檯，也沒有發現任何錯誤。 – dot

這將彈出對話框

<div id="progress-indicator" style="display:none;"> 
<img src="<?php echo base_url();?>assets/img/wip.gif" /> Please Wait... 
</div> 

(function ($) { 
$('#saveData').click(function() { 
$("#progress-indicator").dialog({ 
    height: 140, 
    modal: true 
    }); 
    }); 
})(jQuery);

來源

2012-09-10 18:21:58 PRP

我只是試圖將其添加到我的文檔。準備好了，但它並沒有解決我的問題。 – dot

你能看到對話框嗎？ – PRP

你需要點擊（）事件之前定義的對話框。並在點擊中，你需要調用open（）。

$(document).ready(function(){ 
$("#progress-indicator").dialog({ 
    height: 140, 
    modal: true 
    }); 
$('#progress-indicator').hide(); 

$('#save').click(function() { 
$('#progress-indicator').dialog('open'); 
}); 
});

來源

2012-09-10 19:11:18

jquery模式對話不會彈出

回答

相關問題