CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Nicholas
Nicholas

Reputation: 2060

Form elements cannot be focused

I'm working on a project that involves a rather large and unwieldly codebase. Within a jquery draggable widget are several hidden divs that are shown when certain menu buttons are clicked. One of these contains a number of form elements, including inputs and select boxes.

The problem is that clicking on any of these form elements does absolutely nothing. If I add an alert to the onclick event, onmousedown event, or onmouseup event they do fire. However, onfocus events do not fire. I can focus an element by tabbing to it.

My guess was that there was a "preventDefault" or "return false" somewhere causing this, but I've searched through the almost 10,000 lines of JQuery/JS several times and found none that seem to relate to this problem; The codebase is too large to read through line-by-line except as a last ditch effort. I've tried searching many of the suggestions in this thread as well: HTML input fields does not get focus when clicked .

I'm at a loss as to what to try next. I've never seen something like this before. Is there a way to see a list of all events for a given element? I could not find this option in the Chrome or FF inspector. Is there a way in these browsers to have it log all fired events and their results? I tried the following but got back only a keyup or change event (depending on which I clicked on):

 console.log($(this).data('events'))

How does one troubleshoot an issue such as this?

Upvotes: 1

Views: 241

Answers (1)

David d C e Freitas
David d C e Freitas

Reputation: 7521

There are two things that might help.

In Chrome -> Right Click -> Inspect Element and on the right hand side there's a "Event Listeners" tab that shows everything working on that element.
(You might see a lot of other chrome extensions binding events to everything, going incognito or disabling all the extensions would clear that up while you debug your issue)

The other way to catch an event is:

In Chrome -> F12 -> Sources tab -> and the on the right press the Pause button | | and then the first javascript to execute from then on will break execution on the line in the appropriate code so you can step through.

Upvotes: 2

Related Questions