Mouseover event in jQuery

Question

I have the following mouseover function:

$('.msg_id').live("mouseover", function() {
    $(this).css('cursor', 'pointer');
    tid = $(this).attr('id');
    idx = $(this).attr('name');
    resp=""; 
    
    $.ajax({
        async: false, 
        url: "log_msg.asp",
        data: $("#msgForm").serialize() + "&aktion=popup&msg_id="+tid+"&msg_id"+idx,
        success: function(data){
            $("#"+tid).html(data);   
        }
        });

    //$.post("log_msg.asp", $("#msgForm").serialize() + "&aktion=popup&msg_id="+tid+"&msg_id"+idx,
        //function(data) {          
          
        //}).success(function(){
            //$("#"+tid).html(data);     
             //resp=data;
             //$('#bub'+tid).css('display', 'block');   
             //popd.css('display', 'block');    
            //});
    });

It puts some html code inside .msg_id ( $("#"+tid).html(data); ). The function mouseover is called in a loop. The ajax request is sent all the time while mouseovering it, not only once. How can I fix it? I have also tried mouseenter, but it fires in a loop too.

I don't get it. Why are you using `mouseover` for this? Why not `click`? — Kemal Fadillah, Sep 02 '11 at 15:43
does it's something happening under the mouse cursor after the putting html content? — Samich, Sep 02 '11 at 15:46
i'm usin mouseover because i want the events fire while mouseovering it , not whiole clicking it. — Magda Muskala, Sep 02 '11 at 15:57

Rion Williams · Answer 1 · 2011-09-02T16:38:15.057

2

You might want to use the mouseenter() event instead, as mouseover will fire upon every move inside the element.

$('.msg_id').live("mouseenter", function() {
    //Do work here
});

or if live isn't required, simply:

$('.msg_id').mouseenter(function() {
    //Do work here
});

MouseOver():

Will fire upon entering an element can fire inside of any child elements.

MouseEnter():

Will fire upon entering an element, and only that element.

edited Sep 02 '11 at 16:38

answered Sep 02 '11 at 15:43

Rion Williams

74,820
37
200
327

where did you get those descriptions? they validate the confusion around what they actually do... – jondavidjohn Sep 02 '11 at 15:48
It's not necessary, was just mimicking it as OP used a live event in his. I'll include a non-live version as well. – Rion Williams Sep 02 '11 at 15:48
ahh, didn't notice they used live. – jondavidjohn Sep 02 '11 at 15:48
The descriptions are from the jQuery documentation. – Rion Williams Sep 02 '11 at 15:49
yeah, they need to have better explanations, it sounds like mouseover should work fine for the OP from that description. – jondavidjohn Sep 02 '11 at 15:50
I removed the quotes as they were a bit difficult to understand, added simpler summaries. – Rion Williams Sep 02 '11 at 15:51
i need live version, cuse the page is dynamic and objects with class .msg_id are added later by ajax call. – Magda Muskala Sep 02 '11 at 15:55

score 1 · Answer 2 · answered Sep 02 '11 at 15:43

1

You want to use mouseenter

answered Sep 02 '11 at 15:43

epascarello

204,599
20
195
236

Mouseover event in jQuery

2 Answers2

Linked