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