I'm attempting to bind functions to these events using jQuery:

$("#cmplist tr").bind('onmouseover', function(){
    console.log('1');
});

$("#cmplist tr").bind('onmouseout', function(){
    console.log('2');
});

$("#cmplist tr").bind('click', function(){
    console.log('3');
});

However none of them seem to work. I'm reasonably sure my selectors are correct since when I enter into the console $("#cmplist tr") it returns:

[tr, tr#survey3, tr#survey20, tr#survey22, tr#survey26, tr#survey28, tr#survey29, tr#survey30, tr#survey33, tr#survey34, tr#survey6, tr#survey19, tr#survey14, tr#survey32, tr#sweepstakes5, tr#sweepstakes9, tr#coupons5, tr#freesample4, tr#freesample5, tr#freesample6, tr#freesample7, tr#gifts3, tr#gifts4, tr#polls2, tr#polls5, tr#polls6, tr#quiz8, tr#trivia4, tr#photo6, tr#photo10, tr#photo11, tr#photo12, tr#photo13, tr#photo15, tr#photo16, tr#photo17, tr#video4, tr#iframe2, tr#iframe4]

Am I missing something about how jQuery events work?

I'm attempting to bind functions to these events using jQuery:

$("#cmplist tr").bind('onmouseover', function(){
    console.log('1');
});

$("#cmplist tr").bind('onmouseout', function(){
    console.log('2');
});

$("#cmplist tr").bind('click', function(){
    console.log('3');
});

However none of them seem to work. I'm reasonably sure my selectors are correct since when I enter into the console $("#cmplist tr") it returns:

[tr, tr#survey3, tr#survey20, tr#survey22, tr#survey26, tr#survey28, tr#survey29, tr#survey30, tr#survey33, tr#survey34, tr#survey6, tr#survey19, tr#survey14, tr#survey32, tr#sweepstakes5, tr#sweepstakes9, tr#coupons5, tr#freesample4, tr#freesample5, tr#freesample6, tr#freesample7, tr#gifts3, tr#gifts4, tr#polls2, tr#polls5, tr#polls6, tr#quiz8, tr#trivia4, tr#photo6, tr#photo10, tr#photo11, tr#photo12, tr#photo13, tr#photo15, tr#photo16, tr#photo17, tr#video4, tr#iframe2, tr#iframe4]

Am I missing something about how jQuery events work?

• javascript
• jquery
• events
• bind

2 Answers 2

Drop the "on" from your event names. Also I think the hip thing to do nowadays is to use "mouseenter" and "mouseleave" with jQuery event handlers. Those events are "normalized" by the library so as to make everything more reliable in the face of quirky browser behavior.

Also, make sure you do your binding in a "ready" handler, unless you're confident you've got an alternative, equally effective solution:

$(function() {

  // your event binding stuff here

});

try this:

$(function(){

    $("#cmplist tr").bind('mouseover', function(){
        console.log('1');
    });

    $("#cmplist tr").bind('mouseout', function(){
        console.log('2');
    });

    $("#cmplist tr").bind('click', function(){
        console.log('3');
    });

});