I'm running in asp.net with javascript and jquery. I've got some javascript that runs on document ready that uses jquery to assign some onclick events with the .on function. That's fine. I also have a partial view that loads up after some user input that needs the same functionality so I'm referencing the script again in the partial view causing the document ready function to fire again and it assigns the onclick events for my controls in the partial view. That works. Except the problem is that I'm getting two onclick event for the controls on the main page causing the event to fire twice if I click on the main page controls after the partial view is loaded. I tried just adding an .off() in the jquery loop to remove the event before it's added so that the second time it runs it would remove the first one and add a new one but the event doesn't get removed. I also tried rewriting it to use .addEventListener and .removeEventLister following the same pattern; removing before adding it, but get the same results.

If I could query for the currently attached event listeners I could easily prevent the second addition of the onclick event but my research tells there's no way to do this in javascript (though you can in chrome dev tools with getEventListeners()).

So why isn't it removing the first event when I do .off() or .removeEventListener()? Is there some kind of scoping like this script that I'm calling twice, it ends up being two instances of the script and you can't remove event listeners that were applied by another script? This is just a guess.

Any guidance would be useful, thanks.