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"); 

    }); 


}); 

Demo как это: http://jsfiddle.net/oscar11/8Mcr6/228/

В firefox. Когда я нажимаю кнопку больше, элемент, который заблокирован, является выбранным элементом. Это правда Но в хром, Когда я нажимаю кнопку больше, весь элемент заблокирован. Это неверно.

Как сохранить хромированную работу?

Спасибо

Answer 1

Его не работает в chrome как block плагин, который вы использовали генерирует DIV элемент, который должен быть помещен после того, как element, на котором вы применили его, т.е. tbody.iteration. Поскольку table не может иметь DIV в качестве прямого элемента, то есть Reference: Permitted content, хром исправляет его для вас, тем самым его не работает.

Вы должны изменить структуру 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>