Click event fired before clicked on Firefox

Question

I have a click event properly fired on IE and Chrome, but not on Firefox.

My code:

sender.bind("open", function () {
    var $openButton = sender.wrapper.find('.k-i-arrow-s');
    $openButton.addClass('active');

    $(document).delegate($openButton, "click", function () {
        sender.close();
        sender.input.blur();
    });
});

The problem is that the delegate on Firefox is fired at the very first time when click event is registered! I also have tried on() and bind() and the same happened.

Explaining the code:

It's a Kendo MultiSelect control. When it opens I have to register a click event to $openButton object, that's all.

Any idea?

Here is the dojo: http://dojo.telerik.com/eSOBo

To test click on the arrow!

Best regards

Daniel

Answer 1

Just look to your code and its full of unnecessary code

sender.input.after($openButton);

line 52, 59 you always insert the same content, you already put the arrow in line 46 with the same code, you won't need this anymore.

Binding close and open for multiselect to add and remove active class in arrow, that is something that ruin your expected behaviour. I suggest you read "What is event bubbling and capturing?".

The moment you click on arrow or multiselect textbox normally (all browser should have same behaviour) event capturing will work the same, start with multiselect open then arrow click event. Yet this jquery code after which re-insert the element content, give you different experience in firefox with the rest browser. Try remove that code and see what happen with all browser.

Check out this dojo to see a simpler implementation yet supported with all browser.