jQuery - 动态添加的元素不适用于鼠标离开，点击事件答案

【问题标题】：jQuery - Dynamically added element not working on mouseleave, click eventsjQuery - 动态添加的元素不适用于鼠标离开，点击事件
【发布时间】：2021-02-11 23:43:38
【问题描述】：

我有下面的 div 类“保存的愿望清单”，

<div class="saved-wishlist">
    <i class="fas fa-wishlist"></i>
    <a href="#" id="A123" class="remove-from-wishlist">
        Saved to Wish List</a>
</div>

在带有“remove-from-wishlist”类的锚点悬停时，我正在更新 'saved-wishlist' div 的 html，

jQuery

    $(document).on('mouseenter', '.remove-from-wishlist', function() {
        var $this = $(this);
        $this.closest('.saved-wishlist').html($("#tooltip_remove_content").html()); //Gets html from other div and updates html of 'saved-wishlist' div
    });
    $(document).on('mouseleave', '.remove-from-wishlist', function() {
        var $this = $(this);
        //some jQuery code
    });

现在，类 'saved-wishlist' 的 div 看起来像，

<div class="saved-wishlist">
        <i class="fas fa-minus-circle"></i>
        <a href="#" id="A123" class="remove-from-wishlist">
            Remove from Wish List</a>
</div>

我面临的两个问题，

在新添加的锚标记上，当我将鼠标光标移开时，不会调用 mouseleave 函数，而是触发 mouseenter 。

点击新添加的锚标签，没有任何反应，我有下面的代码，

 $(document).on('click','.remove-from-wishlist',function(){
     //some jQuery code 
 });

我在这里犯了什么错误？

【问题讨论】：

因为您要替换整个saved-wishlist 元素的HTML，所以remove-from-wishlist 元素被删除。您无法在不再存在的元素上获得 mouseleave 事件。
新添加到 'saved-wishlist' div 的 html 包含 'remove-from-wishlist' 元素。
从愿望清单中删除
哦，没注意到。
请发帖minimal reproducible example。您可以使用Stack Snippet 使其可执行。

标签： jquery

【解决方案1】：

我假设你只是想在 mouseenter/mouseleave 上有一个图标和文本切换效果...然后点击一个动作。

这一切都可以通过一个事件处理程序来完成，而无需直接替换 HTML。

$(document).on("mouseenter mouseleave click", ".remove-from-wishlist", function (e) {
  var $this = $(this);
  
  if(e.type === "mouseenter"){
    $this.text("Remove from Wish List");
    $this.prev().toggleClass("fa-heart fa-minus-circle");
  }
  
  if(e.type === "mouseleave"){
    $this.text("Saved to Wish List")
    $this.prev().toggleClass("fa-heart fa-minus-circle");
  }
  
  if(e.type === "click"){
    console.log("Do something to remove the entry from wish list here.");
    // Additional code here...
  }
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>

<div class="saved-wishlist">
  <i class="fas fa-heart"></i>
  <a href="#" id="A123" class="remove-from-wishlist">
    Saved to Wish List</a>
</div>

【讨论】：

当我悬停时，文本会发生变化，但奇怪的是我的 fontawesome (fas fa-minus-circle) 的 css 没有得到应用 - 空白方形框。当我离开时，文本会发生变化 - 这很好，但是没有应用用于 fontawesome 的新 css，而是应用了 mouseenter 中定义的图标 css（fas fa-minus-circle）。点击作品
确保使用正确的fa-__ 类。
我仔细检查过，类名是正确的，在鼠标离开时，fas fa-minus-circle 图标显示，即使那是无效的。
你应该在鼠标进入和离开时都有$this.prev().toggleClass("fa-wishlist fa-minus-circle");。 .toggleClass() 添加或删除类。 -- 请注意，我使用了fa-heart，因为fa-wishlist 不适用于演示。
将<a> 的文本更改为.text() 将删除<i> 元素。所以如果你想要<i>在里面，你必须使用<span>作为文本并使用$this.find("span").text("the text here")