CODEWITHSUNDEEP
javascriptjqueryeventsbind
Casey Flynn
Casey Flynn

Reputation: 14038

jQuery .bind() not working properly

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?

Upvotes: 0

Views: 13280

Answers (2)

thecodeparadox
thecodeparadox

Reputation: 87073

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');
    });

});

Upvotes: 2

Pointy
Pointy

Reputation: 413717

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

});

Upvotes: 8

Related Questions