时间戳

首页 > 解决方案 > 如何在动态元素中应用mouseleave？

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

问题描述

PS：我不确定要在标题中添加什么，所以请阅读。

我有使用div元素创建的表。该表是作为服务器端的结果动态创建的。在表格内，每一行都有dropdown box并且它们都被隐藏了，我想在以下dropdown box情况下显示它们：

  1. 表格行是悬停和
  2. 单击表格行内的按钮，

当鼠标离开表格行时，我想隐藏dropdown box.

我知道可以使用 来完成on，但在我的情况下，dropdown box只有当鼠标离开表的父级时才会隐藏。

这是表父级的代码段

<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>

标签： jquery

解决方案

您可以将多个事件绑定到一个元素。看看我的代码，也许它可以帮助你。

$('div#table-parent').on('mouseover mouseleave click', '.div-table-row', function(event) {
  if(event.type == "mouseleave"){
    $(this).find('.dropdown-box').hide()
  }
  else{
    $(this).find('.dropdown-box').show();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="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>
</div>

推荐阅读