Nested 'on' click and keypress functions not working?

Question

  element.on("click", function(){
    element[0].querySelector("input").focus()
    element[0].querySelector("input").on('keypress',function(key){
        console.log(key)
    }
  })

This returns this error:

Uncaught TypeError: undefined is not a function 
runner:18(anonymous function) 
runner:18(anonymous function) 
angular.js:2843forEach 
angular.js:325eventHandler

And the JSBin

Thanks!

Usually if there's an error, it would be awesome for us to be able to see it ;) — Sterling Archer, Sep 22 '14 at 20:47
There are syntax errors in your posted example. Have you checked the console log to make sure you have fixed any syntax errors? — jwatts1980, Sep 22 '14 at 20:50
Semi-colons aren't required in JavaScript, they're good practice though. There is no syntax error here. — Sterling Archer, Sep 22 '14 at 20:52
@SterlingArcher No, semi-colons are not required, but the missing `)` is definitely a syntax error — user229044, Sep 22 '14 at 20:57
@SterlingArcher I wasn't referring to the semicolons... there is a missing close parenthesis after the curly bracket after the second `on` — jwatts1980, Sep 22 '14 at 20:57

Stryner · Accepted Answer · 2014-09-22T21:05:54.330

3

querySelector returns a DOM object. The .on function is a jQuery function. You need to wrap it:

$(element[0].querySelector("input")).on('keypress',function(key){
    console.log(key)
}

Also, I would be weary of adding event handlers inside of other event handlers. Whenever you click the element, the keypress event will be added. If you click the element 5 times, the input will now have 5 active keypress events unless you're removing it at some point. You should only do it if you're aware of these implications - and even then it can make code hard to follow.

edited Sep 22 '14 at 21:05

answered Sep 22 '14 at 20:59

Stryner

7,288
3
18
18

"Also, I would be weary of adding event handlers inside of other event handlers." Why's that? – Sterling Archer Sep 22 '14 at 21:00
@Ninsly I would add that info to the answer. – jwatts1980 Sep 22 '14 at 21:04
Yes, add that to answer and perhaps a `.unbind('keypress')` ? – Mohamed El Mahallawy Sep 22 '14 at 21:05
@jwatts1980 Thanks, I just added it and removed the comment. – Stryner Sep 22 '14 at 21:06
1

@MohamedElMahallawy That would work, but as per the [documentation](http://api.jquery.com/unbind/), using `.off('keypress')` is preferred – Stryner Sep 22 '14 at 21:08
@MohamedElMahallawy Are you aware that you can use `this` instead of `element[0]` inside the event function to refer to the clicked element? The `element[0]` seems like an odd implementation unless you have a specific reason for it. – jwatts1980 Sep 22 '14 at 21:10
Yeah, its angularjs providing the element as such – Mohamed El Mahallawy Sep 22 '14 at 21:16
Explains why use `element[0]` => http://stackoverflow.com/questions/14800443/angularjs-element-innerhtml-is-undefined-from-within-directive – Mohamed El Mahallawy Sep 22 '14 at 21:20

Nested 'on' click and keypress functions not working?

1 Answers1