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

}

在$（document）.ready事件中：

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

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

参见： http : //jsfiddle.net/4tRzs/2/

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

请帮忙，谢谢。

Answer 1

您需要使用jQuery中的on函数

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

on是旧的live功能。 文件资料

您的函数中将具有以下内容：

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