I have a rather complicated HTML5 application that I am working on (trunk, puppet, jquery, underscore, handlebars, bootstrap, etc.) and deep inside the application there is a modal popup with a form.
When modal pop-ups open, the first time you click on any form field, the form field cancels the selection. After this first click, you can use the form as usual. When the application ultimately loads into the iFrame during production (don’t ask) when you first click on any form field or hover over any button, the entire page scrolls down to the top of the div element, the form is inside the modal one at the top of the page, but after of how he does it once, he does not do it again (not yet embarrassed? Yes, he is complex and multi-level).
I don’t understand how to start debugging this problem (thousands of lines of code, two libraries).
I tried:
console.log('bound events: ', $._data(this.$el.find('#RandomFieldID')[0], 'events'));
console.dir($('#elmId').data('events'));
console.log('bound events: ', $._data($('body')[0], 'events'));
But it didn’t give anything.
Since this is a library on a library with a framework within the framework, I don’t even know where to start trying to find a thing that is obviously tied to these fields, or even if these are fields that are connected or something else is completely ...
So, any suggestions on good strategies for debugging a mysteriously related javascript event (with several JS libraries and frameworks that cannot be simply commented on until the problem is resolved, as they rely even on getting the HTML code appear on page first)?
, , jsfiddle - , , , , JSFiddle () (, , ).
. !