javascript - jQuery BlockUI 元素阻止在 Chrome 上不起作用

Question

我的 HTML 代码是这样的:

<table>
  <tbody class="iteration">
    <tr>
      <td>
        <button class="save">More</button>
      </td>
      <td>
        <div class="cruisedropd">
          <div class="loading"></div>
        </div>
      </td>
    </tr>
  </tbody>
  <tbody class="iteration">
    <tr>
      <td>
        <button class="save">More</button>
      </td>
      <td>
        <div class="cruisedropd">
          <div class="loading"></div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

我的 Javascript 代码是这样的:

$(function(){
    $(".cruisedropd").hide();
    $('.save').click(function () {
        var parent = $(this).closest("tbody.iteration");
        $(parent).block({ message: null }); 

        parent.toggleClass('is_loading',  parent.hasClass('is_loading') );
        parent.find(".cruisedropd").toggle();
        parent.find('.loading').html("work");

    });


});

演示是这样的:http://jsfiddle.net/oscar11/8Mcr6/228/

在 firefox 中，当我单击更多按钮时，被阻止的元素是被选中的元素。是真的 但是在 chrome 中，当我点击更多按钮时，所有元素都被阻止了。这是假的。

如何保持 chrome 工作？

谢谢

Answer 1

它在 chrome 中不起作用，因为您使用的 block 插件正在生成 DIV 元素，该元素应放在 之后您应用它的元素，即tbody.iteration。由于 table 不能将 DIV 作为直接元素，即 Reference: Permitted content ，chrome 已为您修复它，因此它无法正常工作。

您应该更改 HTML 结构。如下所示。

<table>
  <tbody class="iteration">
    <tr>
      <td>
        <button class="save">More</button>
      </td>
      <td>
        <div class="cruisedropd">
          <div class="loading"></div>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<table>
  <tbody class="iteration">
    <tr>
      <td>
        <button class="save">More</button>
      </td>
      <td>
        <div class="cruisedropd">
          <div class="loading"></div>
        </div>
      </td>
    </tr>
  </tbody>
</table>