Adding events to Datepicker next and prev buttons

I've wrote this simple code to attach events to one of my divs. But the events never seem to be fired. Here is my code:

$(function() {
    $(".ui-datepicker-prev").hover(function () {
      alert('H');
    });

    $(".ui-datepicker-prev").click(function () {
      alert('C');
    });

    $(".ui-datepicker-prev").mouseover(function () {
      alert('MO');
    });
});

P.S. I want to add event to next and prev buttons of jQuery DatePicker

Answers


If you are creating new elements try to use live()

$("#todayBtn").live("hover", function(){
  alert('H');
});

Also wrap your code in DOM ready

$(document).ready(function() {
  // Your code
});

Based on your updated question, I'm assuming that the elements you're selecting are created after DOM ready, in which case you'll most likely want to use event delegation. E.g.,

$(document).delegate('.ui-datepicker-prev', 'hover', function() {
    alert('H');
});

$(document).delegate('.ui-datepicker-prev', 'click', function() {
    alert('C');
});

$(document).delegate('.ui-datepicker-prev', 'mouseover', function() {
    alert('MO');
});

Please note that delegating hover and mouseover events is pretty expensive, so you may want to reconsider that. Another approach would be to bind directly to the elements (like you were attempting in your example), but wait to do so until after you know for sure the elements exist.


Need Your Help

Oauth : Get user's permissions without any redirection to a server

import oauth contact

in my website, I want to add a "invite friend of my contacts book" functionnality.

GWT Hyperlink getHTML not supporting click event

gwt

In my GWT project, we are revamping the design and i am stuck up with an issue.