为什么此输入始终保持可点击？

Question

基本上我想要的外层div采取一切事件，因此在div输入和别的无法点击：

<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(); 
    }; 
}); 

这里的非工作示例http://jsfiddle.net/KFWmk/3/

任何帮助表示赞赏:)

Answer 1

在较新的jQuery（1.6+）：

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

这个HTML readonly属性设置为true，在一个div的所有输入。

请注意，使用.attr()设置属性（布尔值为on或off的属性）在jQuery中已被弃用。

Answer 2

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

您可以将div中的所有输入字段设置为只读。

Answer 3

你可以尝试这样的

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

Answer 4

首先，bacause你没有带包括jQuery库。
其次，因为你有一个type-o。
第三是因为焦点是在点击事件之前发出的。 （Prove）

如果你想输入字段不可编辑，你可以使用：

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

或者干脆当您在HTML创建输入字段：

<input readonly type="number"> 

如果你想防止专注于您可以使用的输入字段：

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