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

Question

I have a simple input element with the following attributes:

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

In order set a cross-browser placeholder for it I use testFocusBlur function

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

}

which, on $(document).ready event:

1. calls the blur event on the input element;
2. if type=password call the replaceInputType javascript function;
3. replaceInputType function creates a new dom input element, set type=text for it, get the attributes of the old input elements and change the class from initClass to newClass;
4. append the new input element to the same div

the above works correctly but, once the new input element is set, and I focus on it, the initial testFocusBlur function doesn't work anymore

see: http://jsfiddle.net/4tRzs/2/

note: i don't want to set an inline function in the input such as onfocus="...."

Please help, Thanks.

Answer 1

You need to use on function from jQuery

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

on is the old live function. documentation

You will have something like this in your function:

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