Event not triggering in Chrome

Question

I am having an issue where clicking #target3 does not trigger the event handler. I think the issue is that the event is not propagating down to the <option> of the <select> element? The annoyance is that this snippet works in; IE8 and above, and Firefox, but does not work in Chrome?

 var target = 1; $("#target"+target).bind("click.clickEvent",function(){TargetClicked(this)}); function TargetClicked(ele) { if($(ele).prop("id") == ("target" + target)) { $("body").append("You clicked >> #" + $(ele).prop("id") + "<br>"); $(ele).unbind(".clickEvent"); target++; $("#target"+target).bind("click.clickEvent",function(){TargetClicked(this)}); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p id="target1">Click here first</p> <p> <select id="target2"> <option>----</option> <option id="target3">target 3</option> </select> </p> 

This is from a very large project, so I would like to try and find a javascript / JQuery fix or workaround for this issue if possible as editing the HTML is not feasible.

Answer 1

You are passing this to the new event, which is window . Instead pass $("#target"+target) .

Note, workaround. To return expected result at chrome, you can use change event, .is() , select.options.selectedIndex , .eq()

 var target = 1; $("#target"+target) .bind("click.clickEvent change.clickEvent",function() { TargetClicked(this) }); function TargetClicked(ele) { if ($(ele).prop("id") == ("target" + target)) { $("body").append("You clicked >> #" + $(ele).prop("id") + "<br>" + ($(ele).is("select") ? "You clicked >> #" + $("option") .eq(ele[0].options.selectedIndex) .prop("id") : "") ); $(ele).unbind(".clickEvent"); target++; $("#target"+target) .bind("click.clickEvent change.clickEvent",function(e) { TargetClicked($("#target"+target)) }); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <p id="target1">Click here first</p> <p> <select id="target2"> <option>----</option> <option id="target3">target 3</option> </select> </p> 

jsfiddle https://jsfiddle.net/xy5rc1tu/1/

Answer 2

This is a known Chrome bug

https://bugs.chromium.org/p/chromium/issues/detail?id=26017

I fixed this issue by checking to see what type of element was being targeted, and then in the case of an <option> , I instead applied a change event instead of a click event.

The caveat is that this event has to go on the <select> element, not the <option> element, which in my case was not ideal.

if(!$("#target"+target).is("option"))
    $("#target"+target).click(function(){TargetClicked(this)});
else
    $("#target"+target).parent("select").change(function(){TargetClicked(this)});