jQuery UI Dialog не открывается во второй раз, но фон недоступен

Question

Диалоги создаются с помощью тега JSTL foreach.

В первый раз, когда я пытаюсь открыть диалог (любой из них), он открывается нормально, но во второй раз, когда я пытаюсь его открыть, фон становится серым и недоступен из-за того, что диалог является модальным, но диалоговое окно не является показано на рисунке.

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

Это мой HTML:

<button id="buttonAddTask${category.id}" class="buttonAddTask">Add Task</button> 

... 

<div id="dialog${category.id}" title="Create new task" class="task-dialog"> 
<form:form id="taskForm${category.id}" 
    action="${contextPath}/someAction" 
    method="POST" modelAttribute="someAttribute"> 
    <fieldset> 
     <form:input type="text" path="taskName" id="taskName" 
      class="text ui-widget-content ui-corner-all" /> 
     <form:textarea rows="4" path="taskDescription" 
       id="taskDescription" name="taskDescription" 
       class="text ui-widget-content ui-corner-all"> 
     </form:textarea> 
    </fieldset> 
</form:form> 
</div> 

Это мой JS код:

$(function() { 

    var form; 
    var taskDialog = $(".task-dialog"); 
    var buttonAddTask = $(".buttonAddTask"); 

taskDialog.dialog({ 
    autoOpen : false, 
    height : 500, 
    width : 415, 
    modal : true, 
    buttons : { 
     "Create task" : addTask, 
     Cancel : function() { 
      taskDialog.dialog("close"); 
     } 
    }, 
    close : function() { 
     var form = $(this).find("form")[0].reset(); 
     allFields.removeClass("ui-state-error"); 
     } 
    }); 

    function addTask() { 
     var thisId = $(this).attr("id").substring(6, 106); 
     $("#taskForm" + thisId).submit(); 
     return true; 
    } 

buttonAddTask.on("click", function() { 
     var thisId = $(this).attr("id"); 
     var idNumber = thisId.substring(13, 14); 
     $("#dialog" + idNumber).dialog("open"); 
    }); 
}); 

открыть диалог с .dialog ("открыть"), и закрыть его после. Доступ к диалогу осуществляется с помощью селектора идентификаторов, поэтому он должен быть доступен после того, как он будет перенесен в конец тега тела. Что я делаю неправильно или что мне нужно сделать, чтобы показать диалог второй раз?

Я использую jQuery 2.1.1 и jQuery-ui 1.11.2.

Answer 1

Я получил это через некоторое время.

Это был экземпляр/вставка из некоторого примера, и он был изменен в соответствии с моими потребностями. Хитрость заключалась в том, чтобы удалить незаявленную переменную «allFields» в тесной функции.

Линия для удаления:

allFields.removeClass("ui-state-error"); 

Если у вас есть аналогичные проблемы, проверить близкую функцию необъявленных varibles, и удалить их.