my hover function in jquery it's not working

Question

i am trying to append p tag with some text and i trying to show alert message when hover that p tag content but here it's not working here is my code:code

If you're going to add multiple elements (as is possible in your demo), use `class` instead of `id`. `id` is meant to be unique throughout the document. — Emil Lundberg, Dec 12 '11 at 16:33

score 2 · Accepted Answer · answered Dec 12 '11 at 16:32

2

Here you go: http://jsfiddle.net/Skooljester/37TUN/3/ Instead of click and hover, I used the live function.

Here's the code:

$('#addmore').live("click", function(){
   $('<p id="text3">text3</p>').appendTo('#paragraph_div');
});   
$('#text3').live("mouseover", function(){
   alert('its done!');
});

answered Dec 12 '11 at 16:32

ayyp

6,590
4
33
47

1

This is acceptable, but take note that there are some [serious drawbacks](http://api.jquery.com/live/) with `live` and that it has been deprecated. If possible I would bind the event after the fact as needed, and when not possible use `delegate` or `on`. – David Brainer Dec 12 '11 at 16:38
@DavidBrainer-Banker Thanks for the heads-up! I'll take at look at the other things, this was just the best way that I knew how to accomplish this. – ayyp Dec 12 '11 at 16:39

score 1 · Answer 2 · edited May 23 '17 at 12:27

1

You just need to move your code around a little bit. Here is what I changed:

$('#addmore').click(function() {
    $('#paragraph_div').append("<p id='text3'>text3</p>");
    $('#text3').hover(function() {
        alert('its done!');
    });
});

You were trying to bind the hover event before you had created the div to bind it to. I moved it inside the click event where you were actually creating the text3 div. You need to remember to always bind events after creating new dom elements.

Note that as mentioned in some other answers you can use live (deprecated), delegate or on (1.7+). However, I tend to err on the side of adding events to elements after creation whenever it is reasonable to do so.

Also, calling an alert during a hover event may not really make sense depending on your intent. You might want to use the hover to display a div or perform another action. If you want to popup the alert it would be better to use mouseover. See JavaScript/jQuery: event fired twice for more details.

$('#addmore').click(function() {
    $('#paragraph_div').append("<p id='text3'>text3</p>");
    $('#text3').mouseover(function() {
        alert('its done!');
    });
});

edited May 23 '17 at 12:27

Community

1
1

answered Dec 12 '11 at 16:27

David Brainer

6,223
3
18
16

That calls the alert twice, however. – Prisoner Dec 12 '11 at 16:28
@Prisoner Do you mean if you add more than one element with an ID of `text3`? You definitely should not be adding multiple elements with the same ID. – David Brainer Dec 12 '11 at 16:31
No, its doing it if I only create one #text3 and hover over it (alert box twice) - using Chrome 15. – Prisoner Dec 12 '11 at 16:35
@Prisoner The issue you are referring to is related to the interaction between alert and hover (see http://stackoverflow.com/questions/598276/javascript-jquery-event-fired-twice). It would be better to use mouseover or something other than an alert. I was simply responding the original poster's question. – David Brainer Dec 12 '11 at 16:44

David Thomas · Answer 3 · 2011-12-12T16:36:58.983

1

You're calling hover() on an element that's not yet in the DOM. To work around this, use on():

  $('#paragraph_div').on('mouseover','#text3',function(e){
        if ($(e.target).is('#text3')){
            alert("It's done!");
        }
    });

JS Fiddle demo.

As noted in the comments, by Alnitak, on() is only available with jQuery version 1.7 and above. To use a version of jQuery prior to version 1.7, you can use delegate() to much the same effect:

  $('#paragraph_div').delegate('#text3','mouseover',function(e){
        if ($(e.target).is('#text3')){
            alert("It's done!");
        }
    });

JS Fiddle demo using jQuery 1.4.4 (just to demonstrate a different version).

edited Dec 12 '11 at 16:36

answered Dec 12 '11 at 16:29

David Thomas

249,100
51
377
410

1

but only if you're using jQuery 1.7+, otherwise use `.live()` – Alnitak Dec 12 '11 at 16:33
Well, prior to 1.7 `delegate()` is the preferred option (according to the notes for [`live()`](http://api.jquery.com/live/)). – David Thomas Dec 12 '11 at 16:38

dku.rajkumar · Answer 4 · 2011-12-12T16:58:10.377

1st thing please remove document quotes. 2nt thing is change the hover to live with events mouseenter and mouseleave because hover implicitly invoke events mouseenter and mouseleave. check the fiddle http://jsfiddle.net/37TUN/10/

$(document).ready(function () {
$('#addmore').click(function(){
$('#paragraph_div').append("<p id='text3'>text3</p>");
});
$('#text3').live('mouseenter mouseleave',function(){
alert('its done!');
});
});

my hover function in jquery it's not working

4 Answers4