Py学习  »  Jquery

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

Switch • 5 年前 • 286 次点击  

我对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

Python社区是高质量的Python/Django开发社区
本文地址:http://www.python88.com/topic/31355
 
286 次点击  
文章 [ 2 ]  |  最新文章 5 年前
Jamie Burton
Reply   •   1 楼
Jamie Burton    5 年前

您在前面的注释中提到了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/

j08691
Reply   •   2 楼
j08691    5 年前

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