Question

I am debugging foreign complicated js code. There is button, when I press it, page gets reloaded, but that shouldn’t happen. When I break inside click handler, it executes completely and page repload/refresh happens after it has finished. After I exit handler, I get into jquery depth. How can I track wich piece of code makes page reload? Thanx!

Answer 1

The problem was that the <button> declaration didn’t include the type attribute. Here’s what the HTML standard says about that:

The type attribute controls the behavior of the button when it is
activated. It is an enumerated attribute. The following table lists
the keywords and states for the attribute — the keywords in the left
column map to the states in the cell in the second column on the same
row as the keyword.

+---------+---------------+--------------------+
| Keyword |     State     |  Brief description |
+---------+---------------+--------------------+
| submit  | Submit Button | Submits the form.  |
| reset   | Reset Button  | Resets the form.   |
| button  | Button        | Does nothing.      |
+---------+---------------+--------------------+

The missing value default is the Submit Button state.

If the type attribute is in the Submit Button state, the element is
specifically a submit button.

A submit button’s default action is to submit the form to the server (thus reloading the page). To prevent that, you needed to either specify the type="button" attribute on your button, or prevent the default action in your click handler.

JSFiddle showing all cases.