Same Click Event Handler Registering Twice

Question

I'm trying to solve a Bootstrap ScrollSpy issue where clicking the tab links is not doing anything (though scrolling properly highlights the tabs). I noticed that the same Bootstrap click event handler is showing up twice in Chrome Developer Tools (I've verified that if I click on each of the links, it brings me to the same line in the same file).

Why would the same exact click handler be appearing twice? I've also verified that Bootstrap is only being included once.

Answer 1

Try clicking that bootstrap.js link that you're pointing to in your screenshot, and adding a line-of-code breakpoint on the line that registers the event listener. If you think that the event listener gets registered when the page loads, then reload the page. The page should stop because of the breakpoint. The Call Stack pane should help you figure out why the event listener was registered. Resume script execution and you should see the event listener get registered again. If the event listener doesn't get registered on page load, then just interact with the page in a way that you would expect to create the listener.

See Get Started With Debugging if you're unfamiliar with stepping through code with DevTools.