未定义的块 UI 异常'parentNode'

Question

我有巨大的javascript代码，并通过你的blockUI阻止解锁UI.js（http://malsup.com/jquery/block/）

我随机收到"无法读取未定义的属性'父节点'"异常。

似乎我的代码中的阻止/取消阻止序列不同步.ex.由于多个 html 模板，它可能被阻止两次，取消阻止一次，反之亦然。我很难分析所有代码并修复订单。

我能够产生一个问题的小提琴。有人可以看看并建议快速修复吗？

http://jsfiddle.net/pareshvarde/D8KW4/

<script type="text/javascript">
    $(function () {
        $("#blockButton").click(function () {
            myBlock($('#blockSection'));
        });
        window.setInterval(function () {
            myBlock();
            myBlock($('#blockSection'));
            window.setTimeout(function () {
                myUnblock();
                myUnblock($('#blockSection'));
            }, 5000)
        }, 2000);
        $("#unBlockButton").click(function () {
            myUnblock($('#blockSection'));
        });
    });
    myBlock = function (surroundingControl, message) {
        console.log('blocking');
        if (message)
            $("#loader h4").text(message);
        else
            $("#loader h4").text('Loading...');
        if (surroundingControl)
            surroundingControl.block({ message: $('#loader'), baseZ: 1200 });
        else {
            $.blockUI.defaults.message = $('#loader');
            $.blockUI.defaults.baseZ = 1200;
            $.blockUI.apply();
        }
    };
    myUnblock = function (surroundingControl) {
        console.log('unblocking');
        if (surroundingControl)
            surroundingControl.unblock();
        else
            $.unblockUI.apply();
    };
</script>

Answer 1

通常会出现此问题，因为它找不到在"message"属性中指定的 DOM 元素或根本没有指定消息属性，在您的情况下，您需要确保 $('#loader') 返回一个元素。

提示：您甚至可以传递message: null以防您只需要阻止而不显示任何内容或加载图像。

Answer 2

好的，我终于解决了这个问题。基本上，我创建了一个动态元素，并将加载器的内容放入该div中，并将其用于阻止。

我更新的myBlock函数如下：

myBlock = function (surroundingControl, message) {            
        console.log('blocking');
        if (message)
            $("#loader h4").text(message);
        else
            $("#loader h4").text('Loading...');
        var messageContent = document.createElement('div');
        if ($('#loader') !== undefined)
            $(messageContent).html($('#loader').html());
        else
            $(messageContent).html("Loading....");
        if (surroundingControl)
            surroundingControl.block({ message: messageContent, baseZ: 1200 });
        else {
            $.blockUI.defaults.message = messageContent;
            $.blockUI.defaults.baseZ = 1200;
            $.blockUI.apply();
        }
    };

Answer 3

对我来说

，它完成了放置一些文本，而不是从 html 元素加载文本。

以前：

 $.blockUI({
        css: {
            border: 'none',
            padding: '15px',
            backgroundColor: '#000',
            '-webkit-border-radius': '15px',
            '-moz-border-radius': '15px',
            opacity: 1,
            color: '#fff'
        }, message: $('#loadingMessage')
    });

后

 $.blockUI({
        css: {
            border: 'none',
            padding: '15px',
            backgroundColor: '#000',
            '-webkit-border-radius': '15px',
            '-moz-border-radius': '15px',
            opacity: 1,
            color: '#fff'
        }, message: 'Loading'
    })

这样，它奏效了，结果相同！