on() doesn't work as expected and does not work for newly loaded content

Question

My chrome extension is as follows:

$(document).ready(function() {
    ...
    $("input[type!='password'], textarea").on("keypress", function (event) {
        ...
    });
});

This reacts as expected for the normally loaded content but does not work for inputs or textareas loaded later.

I though that was what on was supposed to do, am I using it wrong?

I've played around with something like this to try to solve it but with no success

$(doocument).on("keypress", "input[type!='password'], textarea"....

Here is a live example in jsfiddle, the first input works as expected, the generated ones don't.

Answer 1

$(document).on("keypress", "input[type!='password'], textarea", function (event) {
    alert("this works!");
});

The listener is being attached to the document, and any keypress events will be checked against input[type!='password'] and textarea.

If your HTML markup was structured in a way that there was one parent container of input[type!='password'] and textarea, you could replace $(document) with $('.parent-container') to only attach the listener on that element, as opposed to the entire document.

EDIT: Here's an example: http://jsfiddle.net/yz7F5/5/