Показать/скрыть строку таблицы div на hover с jQuery

Question

У меня есть invoice.php, который загружает таблицу с другой страницы. Таблица выглядит следующим образом, например:

<table id="invoice_table" class="table table-striped table-hover"> 
<thead> 
    <tr> 
     <th> 
      Item 
     </th> 
     <th> 
      Description 
     </th> 
     <th> 
      Delivered 
     </th> 
     <th> 
      # 
     </th> 
     <th> 
      Item Price 
     </th> 
     <th> 
      Total 
     </th> 
     <th> 
      Purchase Total 
     </th> 
    </tr> 
</thead> 
    <tbody> 
<tr class="service" data-inv_services_id="121"> 
      <td> 
       Service 
       <br/><br/> 
       <div class="items_buttons" style="display:none"> 
       <button type="button" data-deleteID="121" data-table="invoice_services" class="edit_service edit_button btn btn-xs default"> 
       <i class="fa fa-pencil"></i> 
       </button> 

       <button type="button" data-deleteID="121" data-table="invoice_services" class="delete_button btn btn-xs default"> 
       <i class="icon-trash"></i> 
       </button> 
       </div> 
      </td> 
      <td>Drop Shipment Charge<br/><strong>Taxable:</strong> N</td> 
      <td id="service_delivery_date"></td> 
      <td id="service_quantity">1</td> 
      <td id="service_item_price">$15.00</td> 
      <td id="service_total">$15.00</td> 
      <td id="service_purchase_price">$15.00</td> 
     </tr> 
<tr class="payment" data-inv_payments_id="1383"> 
      <td> 
       Payment 
       <br/><br/> 
       <div class="items_buttons" style="display:none"> 
       <button type="button" data-deleteID="1383" data-table="invoice_payments" class="edit_payment edit_button btn btn-xs default"> 
       <i class="fa fa-pencil"></i> 
       </button> 

       <button type="button" data-deleteID="1383" data-table="invoice_payments" class="delete_button btn btn-xs default"> 
       <i class="icon-trash"></i> 
       </button> 
       </div> 
      </td> 
      <td>check</td> 
      <td id="payment_entered_date">2016-05-12</td> 
      <td>1</td> 
      <td></td> 
      <td id="payment_amount_paid">$15.00</td> 
      <td></td> 
     </tr> 
    </tbody> 
</table> 

Каждая строка имеет скрытые кнопки инструментов DIV:

<div class="items_buttons" style="display:none"> 
       <button type="button" data-deleteID="121" data-table="invoice_services" class="edit_service edit_button btn btn-xs default"> 
       <i class="fa fa-pencil"></i> 
       </button> 

       <button type="button" data-deleteID="121" data-table="invoice_services" class="delete_button btn btn-xs default"> 
       <i class="icon-trash"></i> 
       </button> 
    </div> 

На моей главной странице invoice.php Я пытаюсь использовать JQuery, чтобы показать items_buttons DIV как мышь пользователя наводится на каждую строку. Затем скройте кнопки этой строки, когда мышь покидает эту строку.

Я работаю над этим:

$('#invoice_table').on({ 

    mouseenter: function() { 
     //stuff to do on mouse enter 
     $(this).find('div.item_buttons').show(); 
    }, 
    mouseleave: function() { 
     //stuff to do on mouse leave 
      $(this).find('div.item_buttons').hide(); 
    } 

}); 

Но это не работает. Я пробовал .hover, но он не работает для таблицы, загруженной на страницу через jQuery.

Любые мысли?

Answer 1

он не работает для таблицы, которая загружается в страницу с помощью JQuery

Вы, вероятно, прикрепление событие после того, как таблица загружена в DOM. Поэтому вы хотите delegate the event, поэтому он привязан к родительскому элементу, который существует. Например:

$(document).on('hover', '#invoice_table tr', function() { ... }); 

(. Это лучше прикрепить событие к родительскому элементу #invoice_table, но это рабочий пример)

Answer 2

Используйте этот код, чтобы добавить обработчик мыши при наведении на каждую таблицу сырой:

function mouseInHandler(){ 
    $(this).find(".items_buttons").show(); 
}; 
function mouseOutHandler(){ 
    $(this).find(".items_buttons").hide(); 
}; 
$('tr').hover(mouseInHandler,mouseOutHandler);