CODEWITHSUNDEEP
javascriptjqueryhoverappendjquery-events
Miha Šušteršič
Miha Šušteršič

Reputation: 10042

.on('hover') won't work on appended elements

I'm appending some text onto a div using a button, and want something to happen when you hover over it (after it's been appended). I tried using .on('hover' '.class') but so far haven't been able to get it to work. Any help would be appreciated.

Here's an example of what I'm talking about (I want something to happen when you hover YOU CLICKED ME!).

var text = "YOU CLICKED ME"

$(".button").click(function () {
    $(".receiver").append('<a class="appendage">'+text+'</a>');                  
                   });

$('.receiver').on('hover', '.appendage', function(){
    $(".tooltip").append('<a class="tooltip">'+text+'</a>');                  
                   });
.receiver {
    height:300px;
    border: 1px solid black;
}
.tooltip {
    height:300px;
    border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='button'>CLICK ME</div>
<div class='receiver'></div>
<div class='tooltip'></div>

Upvotes: 1

Views: 1675

Answers (3)

Tushar Gupta
Tushar Gupta

Reputation: 15913

var text = "YOU CLICKED ME"

$(".button").click(function () {
    $(".receiver").append('<a class="appendage">'+text+'</a>');                  
                   });

$('.receiver').on('mouseenter','.appendage', function(){
    $(".tooltip").append('<a class="tooltip">'+text+'</a>');                  
                   });
.receiver {
    height:300px;
    border: 1px solid black;
}
.tooltip {
    height:300px;
    border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='button'>CLICK ME</div>
<div class='receiver'></div>
<div class='tooltip'></div>

Upvotes: 0

Alexander O&#39;Mara
Alexander O&#39;Mara

Reputation: 60527

The 'hover' pseudo-event is obsolete and removed since jQuery 1.9. Use 'mouseenter mouseleave' instead, or just 'mouseenter' as may be preferable.

Excerpt from jQuery.on documentation:

Deprecated in jQuery 1.8, removed in 1.9: The name "hover" used as a shorthand for the string "mouseenter mouseleave". It attaches a single event handler for those two events, and the handler must examine event.type to determine whether the event is mouseenter or mouseleave. Do not confuse the "hover" pseudo-event-name with the .hover() method, which accepts one or two functions.

Working Example:

var text = "YOU CLICKED ME"

$(".button").click(function () {
    $(".receiver").append('<a class="appendage">'+text+'</a>');                  
                   });

$('.receiver').on('mouseenter mouseleave', '.appendage', function(){
    $(".tooltip").append('<a class="tooltip">'+text+'</a>');                  
                   });
.receiver {
    height:300px;
    border: 1px solid black;
}
.tooltip {
    height:300px;
    border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='button'>CLICK ME</div>
<div class='receiver'></div>
<div class='tooltip'></div>

Upvotes: 2

Popnoodles
Popnoodles

Reputation: 28409

Use mouseover or mouseenter instead of hover. .on('hover') was deprecated in jQuery 1.8, and removed in 1.9.

$('.receiver').on('mouseover', ...

http://api.jquery.com/on/

Deprecated in jQuery 1.8, removed in 1.9: The name "hover" used as a shorthand for the string "mouseenter mouseleave". It attaches a single event handler for those two events, and the handler must examine event.type to determine whether the event is mouseenter or mouseleave. Do not confuse the "hover" pseudo-event-name with the .hover() method, which accepts one or two functions.

Upvotes: 1

Related Questions