Take the following code:
$("#docUploadForm").on("submit", function(event) {
event.preventDefault();
});
Simple enough so far, right? The binding is triggered inside an init() method that gets fired on $(document).ready().
Chrome is complaining on the line that binds the submit: Uncaught TypeError: Object #<HTMLInputElement> has no method 'toLowerCase'
The error thrown comes from the jQuery core. If anyone is curious, the relevant call is at line 1853 in jquery-1.7.1.js: var match = jQuery.noData[ elem.nodeName.toLowerCase() ];
So, what do I need to do to resolve this issue?
Firebug in Firefox 9 complains about the same issue. So it’s not a browser implementation problem.
Found the issue.
This is for an internal web-app that utilizes a Java Content Repository. In JCR, objects are called nodes, so we refer to an object using Node Names.
Inside my form, I had a hidden input with the id of
nodeNamewhich was apparently causing conflict with jQuery. The line that was erroring out in jQuery was callingelem.nodeNamewhich was returning the hidden input instead of the name of the DOM node it was expecting.So lesson learned: don’t give a form element an id of “nodeName”, jQuery doesn’t like it.
See this Fiddle for demo.