Why does this input always remain clickable?

Question

Basically i want the outer div to take all events, so the input and anything else in the div is not clickable:

<div id="div1">
    <div id="div2">
        <label>Input 1</label>
        <input type="text" id="input1" />
    </div>
</div>

$(document).ready(function() {
    $(document).on('click', '#input1', function(e){
        e.preventDefault();
    };
});

Here's the non-working example http://jsfiddle.net/KFWmk/3/

Any help appreciated :)

Answer 1

In newer jQuery (1.6+):

$('div input').prop("readonly", true);

This sets the HTML readonly property to true for all inputs in a div.

Please note that using .attr() to set properties (attributes with boolean values of on or off) has been deprecated in jQuery.

Answer 2

First of all bacause you havn't included the jQuery library.
Second bacause you have a type-o.
Third because the the focus is emitted before the click event. (Prove)

If you want to make an input field not editable you can use:

$("input").prop("readonly", true);

or simply when you create the input field in html:

<input readonly type="number">

If you want to prevent focus on an input field you can use:

$("input").on("focus", function() {
    $(this).blur();
}); 

Answer 3

$('div input').attr("readonly", "readonly");

you can make all input fields in the div as read only.

Answer 4

You can try like this

$(document).ready(function() {
    $('div input').prop("readonly", true);
});