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.