user3304007 user3304007 - 3 months ago 7
Javascript Question

Jquery hover function doesnt run on dynamically added element

This works successfully,

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


However, if its dynamically added, its not working. I have a click function that works for dynamically added elements,

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

alert("works");

});


How can I make hover function work for dynamically added elements ?

Answer
$(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>

Comments