CODEWITHSUNDEEP
javascriptjqueryhtmlgoogle-chrome
Zze
Zze

Reputation: 18805

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.

Upvotes: 1

Views: 939

Answers (2)

Zze
Zze

Reputation: 18805

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

Upvotes: 1

guest271314
guest271314

Reputation: 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/

Upvotes: 2

Related Questions