JQuery BlockUI не разблокирует страницу

Question

У меня действительно странная проблема! Я использовал плагин blockUI JQuery на одной из моих страниц, и он работал нормально. Я сделал то же самое для другой страницы, и она не разблокируется, когда вызывается $ unblockUI.

Вот код:

function showCommentBox() 
{      

    $("#commentBox").addClass("modalPopup");   

    alert($("#commentBox").hasClass("modalPopup")); 

    $.blockUI( { message: $("#commentBox") } );     
}

function cancelComment() 
{    
    alert($("#commentBox").hasClass("modalPopup")); 

    $.unblockUI();   
}

Страница, которая не работает, возвращает false, когда $ ("# commentBox"). HasClass ("modalPopup") оценивается в функции cancelComment, в то время как правильно работающая страница возвращает true.

Answer 1

@ Azam - Нет ничего плохого в коде, который вы разместили выше. Там нет причин, почему это не должно работать. Я скопировал код в посте напрямую и протестировал на этой jsbin page . Убедитесь сами.

Чтобы это было как можно проще, это все, что я использовал для тела HTML.

  <input type="button" value="Show Comment" onclick="showCommentBox()" /> 
  <div id="commentBox" style="display:none"><br/>  
    This is the text from the CommentBox Div<br/> 
    <input type="button" value="Cancel" onclick="cancelComment()" /> 
  </div>

РЕДАКТИРОВАТЬ: После прочтения некоторых других ваших сообщений, я понял, что реальная причина проблемы в том, что вы добавляете div "commentBox" в ItemTemplate GridView. Это приводит к созданию того же самого div с тем же идентификатором, умноженным на количество строк в вашем gridview. Обычно иметь один и тот же идентификатор в нескольких элементах HTML - это плохо, но это то, что делает gridview.

Вот обходной путь, который я протестировал, и он работает. Измените две ваши функции на это:

function showCommentBox() {
    $.currentBox = $("#commentBox");
    $.currentBox.addClass("modalPopup");   
    alert($.currentBox.hasClass("modalPopup")); 
    $.blockUI( { message: $.currentBox } );     
}

function cancelComment() {    
    alert($.currentBox.hasClass("modalPopup")); 
    $.unblockUI();   
}

Здесь я использую переменную jQuery для хранения ссылки на DIV commentBox и передачи ее в $ .blockUI, таким образом, вызов $ .unblockUI () будет работать правильно.