jquery click event not fired on internet explorer

Question

I am trying to do something when user clicks on label.

 ....

I am trying to get the click event fired It is

Answer 1

this is what i had to do to get things working properly. best i can guess, the call to focus() also causes it to lose focus which is what fires the change event for IE.

also, a note on the suggested .click() method... while this will allow an event to fire, so that code can be ran, it does not cause the to lose focus, so the selected index & value are never changed (at least in my case). i event went so far as to call .trigger('change') from the click event in an attempt to force the change, and while the event would fire, the selected option never changed.

i know it is a hack, but it works pretty damn well IMO

// IE hack to get change event to fire properly
if ($.browser.msie) {
    $('select').on('mouseover', function (e) {
        $(e.target).focus();
    });
}

Answer 2

replace

$(".my-label").click

with

$(".my-label").click();

You're not calling the method with click. You're just referencing it. I wonder why it works in Safari/Chrome: it shouldn't.

---

Edit: user edited the question, providing more context.

Most likely, the reason why it is not working now is because you're missing a document ready. Replace your code with:

$(document).ready(function(){ 

    console.log("document ready!");
    $(".my-label").click(function(){
        console.log("click function!");
    });

});

Please report back with what you see in your JavaScript console.

If now it is working, the reason why Safari/Chrome were already ok is because, in those browser, the code was executed after the DOM rendering. That was just luck. Never you should rely on the DOM being ready: always put all of the code referencing any DOM node inside of a $(document).ready() call.

If this is still not working in IE11, then you should provide more context to your question. For example, what does console.log($(".my-label").length) returns? If it is 0, then IE11 is not finding the node. Again, the only reason why this should happen is because the DOM is not ready or, perhaps, the code itself doesn't get called. If you have any error before $(".my-label").click() that code won't get executed. Please note that many "errors" that are accepted in normal browser are not in IE. If you don't post what you see in IE11 JavaScript console, I assume it is clear (and thus there are no errors) but I don't know if you even checked that so I'm taking this as a possibility.

Answer 3

Are you setting up your click handler inside of a dom ready callback? If not your javascript statement is probably being executed prior to the label existing in DOM.

Here is a fiddle: http://jsfiddle.net/muglio/mTaVR/

$(document).ready(function() {
    $('.my-label').on('click',function(evt) {
       alert('clicked');
    });
});