jQuery не работает время от времени, и я не уверен, почему

ProgramBox

jQuery не работает время от времени, и я не уверен, почему

Post author:admin
Запись опубликована:30 апреля, 2023
Post category:Вопросы по программированию

#jquery

Вопрос:

Я все еще новичок в 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 Ссылка

1. где у вас js? документ готов? при загрузке? где-то еще?

2. Это работает на jsFiddle, потому что по умолчанию они переносят ваш JavaScript в окно. обработчик загрузки. Если вы также этого не делаете, или не используете document.ready, или не загружаете свой JS в конце страницы, то вы, вероятно, запускаете его слишком рано

3. Мой фактический код содержит JavaScript в другом файле и находится внизу страницы.

4. Запускали ли вы свой код с открытой консолью dev tools, чтобы посмотреть, есть ли ошибки, когда он не работает должным образом?

5. ДА.. Неперехваченная ошибка типа: $ (…).dialog не является функцией в HTMLInputElement.<анонимный> (вопрос.js: 8) в HTMLInputElement.dispatch (jquery.min.js: 3) в HTMLInputElement.i (jquery.min.js: 3)

Ответ №1:

Поскольку ваши ошибки относятся к функции dialog (), но в jQuery ее нет, вам также необходимо включить после jquery jquery UI.

Ответ №2:

Вы упомянули ошибку jQuery dialog в предыдущем комментарии, похоже, у вас нет 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 /

1. Javascript находится в его собственном JS-файле. Загрузка происходит снизу страницы.

2. Ваш сайт создан на WordPress или любой другой CMS?

3. Я думаю, что я разобрался с этим, я обновлю свой ответ

4. Да, j08691 предоставил это за 4 минуты до вас, и это было проблемой. Он опубликовал это в комментариях, и я искал, чтобы выяснить это. Единственная причина, по которой я даю это ему, но это даст вам дополнительные баллы.. Спасибо..