jQuery event handler .on() not working

Question

I want to attach a event to dynamically created element class.So i used live function but it was not triggered. So checked live function reference ,there i red below notes

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

so decide to use on function,But it still not working.The text field is already attached with jquery ui datpicker.On another element select i disabled that field.

jQuery("#from").attr('disabled','disabled')
.removeClass('date_picker_bg')
.removeClass('hasDatepicker')
.addClass('date_picker_disabled');

after disabled if i click i want to show alert or tooltip.so i tried this,but not working

jQuery(".date_picker_disabled").on("click", function(event){
          alert('hi');
  });

What may be the problem

I am using jquery 1.7.1 ( jquery-1.7.1.min.js)

Answer 1

The problem is that jQuery(".date_picker_disabled") finds elements with that class and binds to them. If elements don't have the class at the time the binding is made, the events will not be handled.

The on function allows you to get round this by handling them on another element when the event "bubbles up to" a parent element. In this instance, we could say the body element – there may be a more specific common parent you could choose.

jQuery(document.body).on('click', '.date_picker_disabled', function(event) {
    alert('hi');
});

The event handler is now bound to the document.body element. All clicks that happen anywhere in the body are tested to see if they originated from an element matching the selector. If so, the handler is fired.

This is explained on the documentation for the on function. It is the same behaviour as was present in previous versions of jQuery with live and delegate functions.

---

Having taken another look at your code, you have disabled="disabled" set on your input element. click events are not fired on disabled elements.

Answer 2

This is tricky.

When your code runs, your element does not have .date_picker_disabled class so your jQuery(".date_picker_disabled") returns nothing and .on() is not called.

Apply .on() on the outer element and use the selector parameter:

// you can also do $(document).on()
$(<outer element>).on('click', '.date_picker_disabled', function() {
    // do something
});

This will delegate the event to the <outer element>. The handler will only be executed if an element with class .date_picker_disabled has been clicked (second param).

Answer 3

From the documentation of .live():

Rewriting the .live() method in terms of its successors is straightforward; these are templates for equivalent calls for all three event attachment methods:

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+ 
$(document).on(events, selector, data, handler);        // jQuery 1.7+

So in your case, you would do:

$(document).on('click', '.date_picker_disabled', function(event){
    alert('hi');
});

Answer 4

I was using jQuery 1.7.2 and tried all proposed methods:

Didn't work:

$(document.body).on('click', '.collapsible-toggle'  function() {
    console.log('clicked');
}); 

Didn't work:

$(document).on('click', '.collapsible-toggle'  function() {
    console.log('clicked');
}); 

None of them worked until I tried the following:

----- Worked! ----

$('body .collapsible-toggle').on('click',   function() {
        console.log('clicked');
}); 

Answer 5

Maybe you should do:

jQuery("body").on("click",".date_picker_disabled", function(event){
          alert('hi');
  });

in this way you attach the event handler to the bosy and specify to fire that event only when that selector ".date_picker_disabled" is matched.
BTW this is exactly how live() worked

Answer 6

try :

$(document.body).on( "click", ".date_picker_disabled", function() {   
   alert('hi');
});

document.body helps for dynamic html too. Just chekc it out: .on not working on dynamic html