jQuery悬停功能无法在动态添加的元素上运行

Question

这可以成功运作，

$('[rel=notif]').on({
    mouseenter: function () {
$(this).find('.solnotifkara').css({"opacity":"0.46"});
  },
    mouseleave: function () {
$(this).find('.solnotifkara').css({"opacity":"0.36"});
    }
});

但是，如果将其动态添加，则无法正常工作。 我有一个click函数，适用于动态添加的元素，

$(document.body).on('click', '[rel="like"]' ,function(){

alert("works");

});

如何使悬停功能适用于动态添加的元素？

Answer 1

$(document).on({
  mouseenter: function () {
    $(this).find('.solnotifkara').css({opacity:0.46});
  },
  mouseleave: function () {
    $(this).find('.solnotifkara').css({opacity:0.36});
  }
}, "[rel=notif]");  // <<<<< delegate here your dynamic element

 $(document).on({ mouseenter: function () { $(this).find('.solnotifkara').css({opacity:0.2}); }, mouseleave: function () { $(this).find('.solnotifkara').css({opacity:1}); } }, "[rel=notif]"); // <<<<< delegate here your dynamic element // for test only: $("button").on("click", function(){ $("body").append('<p><a rel="notif">This is a <span class="solnotifkara">note</span>.</a></p>'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>GENERATE</button>