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元素，该元素应放在您已应用它的element之后，即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>