Jquery hover function doesnt run on dynamically added element

Question

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 ?

$(document.body).on('hover', '[rel="notif"]'?

depperm
– depperm

2016-09-02 17:01:05 +00:00
Commented Sep 2, 2016 at 17:01 — depperm
– depperm, Commented Sep 2, 2016 at 17:01
You need to use $(document) instead $(document.body).

Mohammad
– Mohammad

2016-09-02 17:01:52 +00:00
Commented Sep 2, 2016 at 17:01 — Mohammad
– Mohammad, Commented Sep 2, 2016 at 17:01
@muhammed why ?

user3304007
– user3304007

2016-09-02 17:02:10 +00:00
Commented Sep 2, 2016 at 17:02 — user3304007
– user3304007, Commented Sep 2, 2016 at 17:02

Roko C. Buljan · Accepted Answer · 2016-09-02 17:08:28Z

6

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

edited Sep 2, 2016 at 17:08

answered Sep 2, 2016 at 17:03

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3304007 Over a year ago

Thanks, I was curious when I saw you've changed the opacity but now I see that they're updated ;)

Roko C. Buljan Over a year ago

You're welcome! @user3304007 yes... I was just trying to avoid comments from other users like "hey this does not work" since the barely noticable opacity change :)

Collectives™ on Stack Overflow

Jquery hover function doesnt run on dynamically added element

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related