2015-01-16 51 views
0

我有這段代碼在對話框中添加圖像。當我點擊按鈕時,它會首次將圖像添加到對話框中,但是當我第二次單擊按鈕時,圖像不會顯示在對話框中。問題是什麼?jquery中的對話框錯誤

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI Dialog functionality</title> 
<link 
    href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
    rel="stylesheet"> 
<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<!-- CSS --> 
<style> 
.ui-widget-header,.ui-state-default,ui-button { 
    background: #b9cd6d; 
    border: 1px solid #b9cd6d; 
    color: #FFFFFF; 
    font-weight: bold; 
} 
</style> 
<!-- Javascript --> 
<script> 
    $(function() { 

//Button function 
$("#button").click(function(){ 

     $('<div id="dialog" title="title">Imageselected</div>').dialog({ 
      resizable:false, 
      buttons: {"Enrol": function(){ 
        $(this).dialog('close'); 
       }, 
       "CancelEnrol": function() 
       { 
        $(this).dialog('close'); 
       } 
      } 
     }); 
$('#dialog').append('<img src="https://www.google.co.in/logos/doodles/2014/world-cup-2014-1-6584893165273088-res.png"/><br/>').append($(this).html()); 
    }); 
    });  

</script> 
</head> 
<body> 

<input type="button" id="button" value="Reset"/> 
</body> 
</html> 
+0

第二次在對話框中顯示* * *產生的標記是什麼?當你在調試器中遍歷代碼時,第二個按鈕單擊時的行爲是否有所不同? – David

+0

什麼是「選擇(真)」和「選擇(假)」? – j08691

+0

你能提供一個關於http://jsfiddle.net/的工作示例嗎? –

回答

0

這是因爲你創建的每次點擊對話框,之後你可以將這個.append 您可以追加之前創建的對話框:

$(function() { 

//Button function 
$("#button").click(function(){ 

     $('<div id="dialog" title="title">Imageselected</div>').append('<img src="https://www.google.co.in/logos/doodles/2014/world-cup-2014-1-6584893165273088-res.png"/><br/>').append($(this).html()).dialog({ 
      resizable:false, 
      buttons: {"Enrol": function(){ 
        $(this).dialog('close'); 
       }, 
       "CancelEnrol": function() 
       { 
        $(this).dialog('close'); 
       } 
      } 
     }); 
    }); 
    });  

小提琴:

http://jsfiddle.net/nfhLjkv7/

如果您不需要在每次點擊時創建對話框,只需打開t對話框他點擊功能