在javascript，php，ajax中單擊按鈕后對話框未出現

Question

我有添加小部件按鈕，然后單擊要顯示的對話框，其中有選擇框和保存按鈕。 但是單擊添加小部件按鈕后，我的對話框沒有出現。 默認情況下，我具有按鈕的配置。 當我點擊添加小部件按鈕並檢查螢火蟲時，我的按鈕事件正常觸發，但不知道我在哪里犯了一個小錯誤，因為我的對話框沒有出現。我使用ajax調用來顯示對話框。這里是沒有ajax調用的jsfiddle及其運行良好： 演示但是我必須通過Ajax傳遞小部件ID，為什么不知道使用ajax時對話框不出現的原因。 這是我的PHP代碼：

dashboard.php

$page['button'] = array(
    1 => array( 'Save','pfeil2r','',"'#'",'','','savewidgetId'),
    );
<table width="538" cellspacing="0" cellpadding="0" border="0">
            <tr>
                <td id="widget">   
                <br /><br/>       

<div id="output"></div>

<div id="overlay" class="web_dialog_overlay"></div>

<div id="dialog" class="web_dialog">
   <table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
      <tr>
         <td class="web_dialog_title">Widget</td>
      </tr>

      <tr>
         <td colspan="2" style="padding-left: 15px;">
            <b>Add Widget</b>
         </td>
      </tr>
      <tr>
         <td colspan="2" style="padding-left: 15px;">
             <div id="widgets"> ';
              while($row = mysql_fetch_array($sql_results)){
                $widget=$row['ID'];
                $widget_name=$row['name']; 
              $html .= '
                 <select name="addwidgets" id="addwidgets" >
                         <option value='.$widget.'>'.$widget_name.'</option>                  
                </select>';
              }  
             $html .= '</div>

         </td>
      </tr>
      <tr>
         <td colspan="2" style="text-align: center;">
            '.CreateButton($page['button']).'
         </td>
      </tr>
   </table>
</div>

            </td>
        </tr>
    </table>

dashboard.js

function getaddwidget()
    {
            $.ajax({
        type: "POST",
        url: "ajax/dashboard.php",
        dataType : 'json',
        cache: false,
        data: {'aktion' : 'add-new-widget'},
        success: function(data){
            $('#widget').html(data.html);                       
        },
        error: function(data){
            alert('error');
            //$('#news').html(data.html);
        }
      });
}   

function saveaddwidget()
    {
        var widgets = $('#widgets select[name="addwidgets"]').val();
        $.ajax({
        type: "POST",
        url: "ajax/dashboard.php",
        dataType : 'json',
        cache: false,
        data: {'aktion' : 'save-add-widget','widget':widgets},
        success: function(data){
            $('#widget').html(data.html);

        },
        error: function(data){
            alert('error');
            //$('#news').html(data.html);
        }
      });
}   


     $("#widget .butt-rahmen").click(function (e){
     if($(this).attr('id') == 'addwidgetId')
      {
         ShowDialog(false);
         e.preventDefault();
         getaddwidget();
       }
      });     

      $("#widget .butt-rahmen").click(function (e){
      if($(this).attr('id') == 'saveaddwidgetId')
      {
         HideDialog();
         e.preventDefault();
         saveaddwidget();
       }
      }); 

   function ShowDialog(modal)
   {
      $("#overlay").show();
      $("#dialog").fadeIn(300);     
   }

   function HideDialog()
   {
      $("#overlay").hide();
      $("#dialog").fadeOut(300);
   } 

Answer 1

Web窗體和j-Query用戶界面的對話框插件不能很好地協同工作。 這是因為用於對話框的元素將從頁面DOM中取出，並放入一個新元素中。 這里更可能發生的是您的控件已從表單中刪除，因此，單擊“提交”按鈕不會執行任何操作。