jquery：输入替换后，焦点/模糊事件不起作用

Question

我有一个带有以下属性的简单输入元素：

<input id="InputPassword" type="password" value="Password" class="initClass"/>

为了为它设置跨浏览器占位符，我使用了testFocusBlur函数

function testFocusBlur(){
$('input').focus(function () {
    if($(this).attr('type')=='text'){
       var campoPassword=$(this);
       replaceInputType(campoPassword[0], 'password')
    }
}).blur(function () {
    if($(this).attr('type')=='password'){
    var campoPassword=$(this);
    replaceInputType(campoPassword[0], 'text')
    }
});
$('input').blur();

}

，在$（文件）.ready事件：

1. 调用输入元素上的blur事件;
2. 如果type = password调用replaceInputType javascript函数;
3. replaceInputType函数创建一个新的dom输入元素，为它设置type = text，获取旧输入元素的属性并将类从initClass更改为newClass;
4. 将新的input元素追加到同一个div

以上工作正常但是，一旦设置了新的输入元素，并且我专注于它，初始的testFocusBlur函数就不再起作用了

请参阅：http://jsfiddle.net/4tRzs/2/

注意：我不想在输入中设置内联函数，例如onfocus =“....”

请帮助，谢谢。

Answer 1

您需要使用jQuery中的on函数

$(document).on("focus" , "input", function(){
   ...
}

on是旧live函数。 documentation

你的功能会有这样的东西：

function testFocusBlur(){
$(document).on("focus", 'input', function () {
    if($(this).attr('type')=='text'){
       var campoPassword=$(this);
       replaceInputType(campoPassword[0], 'password')
    }
})
$(document).on("blur", "input", function () {
    if($(this).attr('type')=='password'){
    var campoPassword=$(this);
    replaceInputType(campoPassword[0], 'text')
    }
});
}