未定义的blockUI异常'parentNode'

Question

我有大量的 JavaScript 代码并通过你的 blockUI.js (http://malsup.com/jquery/block/) 阻止解锁 UI

我随机得到“无法读取未定义的属性‘parentNode’”异常。

我的代码中的阻塞/解除阻塞序列似乎超出了 sync.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

对我来说，它完成了一些文本，而不是从 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'
    })

这样，它起作用了，结果相同！

Answer 2

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

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

Answer 3

好的，我终于解决了这个问题。基本上，我创建了一个动态元素并将加载器的内容放入该 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();
        }
    };