JQuery有时不工作，我不知道为什么

Posted 2021-04-10

我还是JQuery的新手，因为我一直有这样奇怪的问题，没有错误，没有任何意义。这不是我可以谷歌的东西，虽然我有，我没有在哪里。所以请告诉我我错过了什么。我可以在jsfiddle上做这个工作，但在其他地方都失败了。

$(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

答案

由于您的错误引用了dialog（）函数，但jQuery没有，您还需要在jquery，jquery UI之后包含它。

另一答案

您在之前的注释中提到了jQuery对话框错误，看起来您的代码中没有包含jquery UI。在jQuery之后添加此内容以修复该错误：

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

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