Question

I’m currently experiencing click events intermittently not firing. Anyone else ever had this problem?

Code is simple:

<ul class="iconButtons ui-widget ui-helper-clearfix">
  <li class="ui-state-default ui-corner-all" title="Save">
    <span class="btnSave ui-icon ui-icon-disk"></span>
  </li>
</ul>

$(document).ready(function() {
    $(".btnSave").click(function() {
       alert("Sometimes I never get called!");
    });
});

Occurs frequently in all browsers. Using live demonstrates the same behaviour.

Answer 1

It turns out the span which the click event was being added to only occupied the central part of the button’s graphic. Clicking directly on the glyph always fired the event, but clicking slightly outside (although seemingly still inside the button) would not raise the event.

I hope this helps anyone else using mini JQuery buttons in the same way they are presented on the JQuery UI ThemeRoller page.