jQuery的BlockUI元素堵不工作的鉻

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，當我再點擊按鈕時，被阻擋的元素就是被選中的元素。這是真的 但在鉻，當我點擊按鈕更多，所有元素被阻止。這是錯誤的。

如何保持鉻工作？

謝謝

Answer 1

及其在chrome不工作作爲您已經使用正在產生DIV元件，它應放在element上已應用它後，即tbody.iteration的block插件。由於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>