jQuery BlockUI不会取消阻止页面

问题描述

我有一个很奇怪的问题！我在其中一个页面中使用了blockUI JQuery插件，它运行良好.我对另一个页面做了同样的事情，并且在调用$ unblockUI时它不会取消阻止页面.

I am having a really weird problem! I used the blockUI JQuery plugin in one of my pages and it worked fine. I did the same for another page and it is not unblocking the page when $unblockUI is called.

这是代码:

function showCommentBox()
{

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

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

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

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

    $.unblockUI();
}

在cancelComment函数中评估$(#commentBox").hasClass("modalPopup")时，无效的页面返回"false"，而正常工作的页面返回true.

The page that does not work returns "false" when the $("#commentBox").hasClass("modalPopup") is evaluated in the cancelComment function while the page that works correctly returns true.

推荐答案

@Azam-您上面发布的代码没有错.没有理由不起作用.我直接将代码复制到了帖子中，并在此 jsbin页面 中进行了测试.亲自看看.

@Azam - There's nothing wrong with the code you posted above. There's no reason why it shouldn't work. I copied the code in the post directly and tested in this jsbin page. See it for yourself.

为了使其尽可能简单，这就是我在HTML正文中使用的全部内容.

To keep it as simple as possible this is all I used for the HTML body.

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

编辑:在阅读了您的其他一些帖子之后，我意识到造成该问题的真正原因是您在GridView的ItemTemplate中添加了"commentBox" div.这将导致创建具有相同ID乘以gridview中的行数的相同div.通常，在多个HTML元素中具有相同的id是不好的，但这就是gridview所做的.

After reading some of your other posts, I realized that real reason for the problem is that your are adding the "commentBox" div inside a GridView's ItemTemplate. This causes the creation of the same div with the same ID multiplied by the number of rows in your gridview. Normally, having the same id in multiple HTML elements is bad, but this is what the gridview does.

这是我测试过的一种解决方法，它可以工作.将您的两个功能更改为此:

Here's a workaround that I tested and it works. Change your two functions to this:

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

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

在这里，我使用jQuery变量存储对commentBox DIV的引用，并将其传递给$ .blockUI，这样对$ .unblockUI()的调用将正常工作.

Here I'm using a jQuery variable to store a reference to the commentBox DIV and passing that to $.blockUI, in that way the call to $.unblockUI() will work correctly.

这篇关于jQuery BlockUI不会取消阻止页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！