添加jQuery UI的對話框將按鈕

我已經寫了一個簡單的代碼測試Jqyery UI對話是這樣的：添加jQuery UI的對話框將按鈕

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 
    <link rel="stylesheet" type="text/css" href="topo.css"> 
    <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css"/> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> 
    <script> 
     plugin = { 
      mainPageRenderer: function() { 
       var plugin = this; 
       var addButton = $('<input id="addButton" class="addButton" type="submit" value="+">'); 
       addButton.click(plugin.addFU); 
       plugin.html = $('<div class="main-page"></div>'); 
       plugin.html.append(addButton); 

      }, 
      addFU:function(){ 
       $(this).dialog({ 
        buttons: [ 
         { 
          text: "OK", 
          click: function() { 
           $(this).dialog("close"); 
          } 
         } 
        ] 
       }); 
      }, 
      refresh: function() { 
       var plugin = this; 
       plugin.mainPageRenderer(); 
       $("body").append(plugin.html); 
      } 

     }; 

     $(document).ready(function() { 
      plugin.refresh(); 
     }); 
    </script> 
</head> 
<body>

的問題，而在jQuery用戶界面上的OK按鈕，點擊對話框我的「+ 「 - 原始頁面上的按鈕消失。何我可以預防它？

來源

2014-10-06 Govan

可以請你分享jsfiddle鏈接嗎？ – 2014-10-06 12:48:13

無法管理jsfiddle，因此我添加了所有代碼。 – Govan 2014-10-06 13:00:32

你需要使用

的Javascript

<script type="text/javascript"> 
$(function(){ 
    var execute = function() { 
     alert('This is Ok button'); 
    } 
    var cancel = function() { 
     alert('This is Cancel button'); 
    } 
    var dialogOpts = { 
     buttons: { 
      "Ok": execute, 
      "Cancel": cancel 
     } 
    }; 
    $("#myDialog").dialog(dialogOpts); 
}); 
</script>

HTML

<input id="myDialog" class="addButton" type="submit" value="+">

的Javascript

$('#myDialog').dialog({ 
         // properties ... 
         buttons: [{ 
           id:"btn-accept", 
           text: "Accept", 
           click: function() { 
             $(this).dialog("close"); 
           } 
         },{ 
           id:"btn-cancel", 
           text: "Cancel", 
           click: function() { 
             $(this).dialog("close"); 
           } 
         }] 
       });

嘗試3210

來源

2014-10-06 12:54:49 cracker

添加jQuery UI的對話框將按鈕

回答

相關問題