Zze Zze - 1 month ago 8
HTML Question

Event not triggering in Chrome

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.

Zze Zze
Answer

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)});