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

使用此代码将鼠标悬停处理程序添加到每个原始表：

    Warning in validateSelected(selected, choices, inputId) :  
    'selected' must be the values instead of names of 'choices' for the input 'month'

    Warning: Error in ..stacktraceon..: object 'input' not found
    Stack trace (innermost first):

    1: shiny::runApp
    Error in ..stacktraceon..({ : object 'input' not found

使用jQuery显示/隐藏表格行div

2 个答案: