jquery - 如何在动态元素中应用mouseleave？

Question

PS:我不太确定标题中应该包含什么内容，所以请阅读。

我使用 div 元素创建了表格。该表是服务器端动态创建的。在表格内，每一行都有下拉框并且它们都是隐藏的，我想在以下情况下显示这些下拉框:

1. 表格行悬停并且
2. 单击表格行内的按钮，

当鼠标离开表格行时，我想隐藏下拉框。

我知道可以使用 on 来完成，但就我而言，下拉框仅在鼠标离开表的父级时隐藏。

这是表父级的片段代码

<div id="table-parent">
  <!--Table will be insert here-->
</div>

这是jquery的代码

$('div#table-parent').on('mouseover','.div-table-row', function(){
    var actionButton = $(this).find('.btn-show-dropdown');
    var tableRow = this;
    $(actionButton).on('click', function () {
        $(tableRow).find('.dropdown-box').css('display', 'block');
    });
}).mouseleave(function () {
    $(this).find('.dropdown-box').css('display', 'none');
});

这是将插入到table-parent的表的片段

<div class="table">
<div class="div-table-row row-item row-item-dropdown">
    <div class="div-table-col col1">
        <p>Some text here</p>
    </div>
    <div class="div-table-col col2">
        <p>Some text here</p>
    </div>
    <div class="div-table-col col3">
        <a href="#" class="btn-show-dropdown">Click to show dropdown box</a>
    </div>
    <div class="dropdown-box" style="display: none;">
        <ul>
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
        </ul>
    </div>
</div>

<div class="div-table-row row-item row-item-dropdown">
    <div class="div-table-col col1">
        <p>Some text here</p>
    </div>
    <div class="div-table-col col2">
        <p>Some text here</p>
    </div>
    <div class="div-table-col col3">
        <a href="#" class="btn-show-dropdown">Click to show dropdown box</a>
    </div>
    <div class="dropdown-box" style="display: none;">
        <ul>
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
        </ul>
    </div>
</div>
....
....
....
</div>

Answer 1

在以下 js fiddle 中尝试此代码:

$(".btn-show-dropdown").mouseover(function() {
$(this).closest('.div-table-row').find('.dropdown-box').css('display','block')
});
$(".btn-show-dropdown").mouseout(function() {
$(this).closest('.div-table-row').find('.dropdown-box').css('display','none')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="table">
<div class="div-table-row row-item row-item-dropdown">
    <div class="div-table-col col1">
        <p>Some text here</p>
    </div>
    <div class="div-table-col col2">
        <p>Some text here</p>
    </div>
    <div class="div-table-col col3">
        <a href="#" class="btn-show-dropdown">Click to show dropdown box</a>
    </div>
    <div class="dropdown-box" style="display: none;">
        <ul>
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
        </ul>
    </div>
</div>

<div class="div-table-row row-item row-item-dropdown">
    <div class="div-table-col col1">
        <p>Some text here</p>
    </div>
    <div class="div-table-col col2">
        <p>Some text here</p>
    </div>
    <div class="div-table-col col3">
        <a href="#" class="btn-show-dropdown">Click to show dropdown box</a>
    </div>
    <div class="dropdown-box" style="display: none;">
        <ul>
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
        </ul>
    </div>
</div>