Javascript onclick does not fire when developer tools are open

Question

I recently ran into an issue where the onclick event of an HTML button was not firing when the developer tools in the browser were open, but it did fire when the tools were closed:

<button type="button" data-bind="visible: !$root.LocalEventId(), click: StartEvent.bind($data, 'lunch')" 
        class="btn btn-success"><i class="fa fa-cutlery">
</i> Going to Lunch</button>

It was really baffling to me for several reasons:

• The behavior of working when the dev tools were closed but not working when they were open was consistent across IE, Chrome, and Firefox.
• This behavior is the exact opposite of all the other related questions I could find on the net. There are many cases where JavaScript event only works when the dev tools are open but stops working when the dev tools are closed. Most of those cases seemed to be related to writing to the console.
• This same code was failing inconsistently on Safari on the iPad. Some users and some cases it didn't work, but in others it did work.

I eventually did figure out the issue. Please see my answer below.

Answer 1

There were two interrelated causes of this issue:

1. The fundamental reason for the behavior of it working with dev tools open and not working when dev tools were closes was related to window size. The bug manifested itself when the window got narrow enough.

   • Since I had the dev tools docked to the right side of the window in all my browsers, when I opened them they narrowed the window enough to make the bug appear. When I closed the dev tools the window got wider and the bug vanished.
   • The reason it was inconsistent in Safari on the iPad was that it depended upon how the user was holding the iPad. If he or she was holding in landscape mode then the screen was wider and the bug did not show. If he or she was holding it in portrait mode then the screen got narrow enough to make the bug visible.

2. The actual error in the code was related to use of Bootstrap. This button was part of a Bootstrap layout. The previous developer who implemented this had accidentally nested a <div class="row"> inside a <div class="col-xs-12"> instead of the other way around. When I put the column inside the row, the bug went away.