Search code examples
javascriptjqueryhtmlpropagation

Why does this input always remain clickable?

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 :)

Solution

  • 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.