Firefox only error with jQuery - handleObj.handler.apply is not a function

Question

I'm working on a plugin that expands Dan Grossman's rangepicker. Here's my repo. Please forgive my messy code, this is still a work in progress. My problem is that Firefox doesn't recognize clicking on the inputs. This is the relevant line:

this.container.find('.ranges')
    .on('click', 
        '.daterangepicker_start_input, .daterangepicker_end_input',   
        $.proxy(this.focusInput, this));

Now the function focusInput itself doens't matter, really, because I added a simple console.log at the top of it and it's very obvious it isn't being run at all (adding breakpoints didn't help either).

I thought it might be because I'm using disabled inputs, but changing that didn't help (and it shouldn't be a problem, as the event is caught through the parent element).

The error message I get from the Firefox console is:

TypeError: handleObj.handler.apply is not a function       jquery-1.11.0.js:4995
TypeError: handleObj.handler.apply is not a function       jquery-1.11.0.js:4624

Which tells me the issue is with jQuery (which I find hard to believe). I'm guessing I did something wrong that causes an error with jQuery, but as Chrome doesn't complain, I have a hard time tracing where exactly I went wrong.

I'd love to get some help on this. Thanks in advance!

update

I've updated the code in github. Now the clicking is not working only with elements that were hidden at first (which uh... doesn't make sense), but more importantly - I'm not getting any errors at all. So I'm stuck. I have no idea what's FF's problem. Even Internet Explorer isn't complaining - what the hell??

Answer 1

Are any ranges available at the time when they are delegated to? The point of delegation is to target an element that you know will always exist and be visible, then delegate from there to elements that may come and go throughout the life of the script.

Try this:

this.container.on('click',
    '.ranges .daterangepicker_start_input, .ranges .daterangepicker_end_input',
    $.proxy(this.focusInput, this));

UPDATE:

I can reproduce this issue if I make a syntax error like so:

$('.target').on('click', '.thing', $.proxy(this.doStuff), this);

If I move the ) then it works as intended.

$('.target').on('click', '.thing', $.proxy(this.doStuff, this));

Do you have something similar happening? The code as you pasted it should be fine. I made a jsFiddle to try and isolate the issue.