jQuery blockUI 同class多div阻塞时message仅最后一个显示的解决办法

你传入的message参数是同一个jQuery实例化的DOM元素。DOM元素的固有特性是同一时刻只能存在于页面的一个位置，blockUI在遍历匹配到的所有div.js-car执行阻塞逻辑时，会把这同一个spinner节点依次插入每个阻塞层容器，最终节点只会留在最后一个被处理的div中，其余容器自然不会显示加载指示器。

方案1：遍历元素时生成独立的spinner节点 #

不要预先创建单个jQuery元素作为固定message传入，改为遍历所有目标div，单独绑定阻塞逻辑，修改后的按钮点击代码如下：

$('#blockButton').click(function() {
    // 遍历所有匹配的js-car元素逐个绑定阻塞
    $('div.js-car').each(function() {
        $(this).block({
            // 传入spinner的HTML字符串，blockUI会自动为每个元素生成独立的DOM节点
            message: '<img src="/_ui/responsive/common/images/spinner.gif"/>'
        });
    });
});

方案2：复用自定义模板时逐次克隆DOM实例 #

如果你的message不是简单的单张图片，而是带多层结构的自定义组件，可以提前定义模板元素，在循环中每次克隆独立副本再传入：

// 仅作为模板使用的spinner元素，不会直接插入页面
const spinnerTemplate = $("<img src='/_ui/responsive/common/images/spinner.gif'/>");
$('#blockButton').click(function() {
    $('div.js-car').each(function() {
        $(this).block({
            // 每次生成独立的克隆节点，不会出现DOM移位问题
            message: spinnerTemplate.clone()
        });
    });
});

• 原代码中解除阻塞的逻辑$('div.js-car').unblock()无需修改，blockUI的unblock方法会匹配所有选中元素批量执行解除操作，功能正常。
• 禁止直接把全局预先创建的、带实际DOM结构的message对象，传入批量元素的block调用中，否则必然出现仅最后一个阻塞容器显示内容的问题。

内容的提问来源于stack exchange，提问作者SyAu