代码之家  ›  专栏  ›  技术社区  ›  Chizl

jquery有时不工作,我也不知道为什么

  •  -1
  • Chizl  · 技术社区  · 6 年前

    我对jquery还是个新手,因为我一直有类似这样的奇怪问题,没有错误,也没有意义。这不是我能用谷歌搜索到的东西,尽管我有,而且我在哪里也找不到。所以请告诉我我错过了什么。我可以在jsiddle上完成这项工作,但在其他地方都失败了。

    $(document).ready(function() {
    {
    	var intID = null;
    }
    
    $('[delbtn]').click( function() {
    	var msg = $('[delbtn]').attr("msg");
    	$('#PromptDialog').html(msg);
    	$('#PromptDialog').dialog( {
          title: "Delete Prompt",
          autoOpen: true,
          show: "blind",
          hide: "explode",
          modal: true,
          width: "400px",
    			resizable: false,
        	buttons: [
          {
            text: "Yes",
            class: "yesClass",
            click: function () {
            	$('#resposneText').html('Yes was clicked');
              $('#PromptDialog').dialog('close');
              clearTimeout(intID);
            }
          },
          {
            text: "No",
            class: "noClass",
            click: function () {
            	$('#resposneText').html('No was clicked');
              $('#PromptDialog').dialog('close');
              clearTimeout(intID);
            }
          }],
    			open: function(event, ui) {
              intID = setTimeout(function(){
                  $('#PromptDialog').dialog('close');
              }, 10000);
          }
      });
    });
    
    $('#DeleteButton').click( function() {
    	var msg = $('#DeleteButton').attr("msg");
    	$('#PromptDialog').html(msg);
    	$('#PromptDialog').dialog( {
          title: "Delete Prompt",
          autoOpen: true,
          show: "blind",
          hide: "explode",
          modal: true,
          width: "400px",
    			resizable: false,
        	buttons: [
          {
            text: "Yes",
            class: "yesClass",
            click: function () {
            	$('#resposneText').html('Yes was clicked');
              $('#PromptDialog').dialog('close');
              clearTimeout(intID);
            }
          },
          {
            text: "No",
            class: "noClass",
            click: function () {
            	$('#resposneText').html('No was clicked');
              $('#PromptDialog').dialog('close');
              clearTimeout(intID);
            }
          }],
    			open: function(event, ui) {
              intID = setTimeout(function(){
                  $('#PromptDialog').dialog('close');
              }, 10000);
          }
      });
    });
    });
    body {
      margin: 10px;
    }
    
    input {
      margin: 20px;
      display: block;
    }
    
    #PromptDialog {
      background-color: #000;
      border-radius: 20px;
      padding: 10px;
    }
    
    .ui-dialog, .ui-dialog-title {
      text-align: center;
      width: 100%;
    }
    
    .ui-dialog-titlebar-close
    {
      display:none;
    }
    
    .ui-dialog .ui-dialog-buttonpane
    {
      text-align: center;
      background: red;
    }
    
    .ui-widget-header, .ui-state-default {
      background:#b9cd6d;
      border: 1px solid #b9cd6d;
      color: #000;
      font-weight: bold;
    }
    
    .ui-dialog
    {
      background: blue;
      color: #fff;
    }
    
    .ui-dialog-content
    {
      color: #fff;
    }
    
    .ui-button.yesClass 
    {
        background: green;
        color: #000;
    }
    
    .ui-button.noClass 
    {
        background: green;
        color: #fff;
    } 
     
    .ui-button.noClass.ui-state-hover,
    .ui-button.noClass.ui-state-active,
    .ui-button.yesClass.ui-state-hover,
    .ui-button.yesClass.ui-state-active
    {
        background: red;
        color: yellow;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <div id="PromptDialog" style="display:none;"></div>
    <input type="button" id="DeleteButton" msg="Are you sure you want to delete it?" value="Delete This">
    <input type="button" id="DeleteButton2" delbtn="1" msg="Wait, What ??" value="Delete This">
    <div id="resposneText"></div>

    JSFiddle Link

    0 回复  |  直到 6 年前
        1
  •  1
  •   j08691    6 年前

    由于您的错误引用了dialog()函数,但jquery没有,所以您还需要在jquery、jquery用户界面之后包含该函数。

        2
  •  1
  •   Jamie Burton    6 年前

    您在前面的注释中提到了jquery对话框错误,代码中似乎没有包含jquery UI。在jquery之后将此添加到ffix,该错误:

    <script
      src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
      integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
      crossorigin="anonymous"></script>
    

    对话框文档: https://jqueryui.com/dialog/