Question

以下是代码：

$("#textBox").focus(function() {
  $("#textBox").replaceWith('<textarea id="textBox">' + $(this).val() +'</textarea>');
});

$("#textBox").blur(function() {
    $("#textBox").replaceWith('<input type="text" class="questionInput" value="' + $(this).val() + '" id="textBox">');
});

<input name="input1" class="questionInput" id="textBox" type="text">

焦点功能有效，但模糊功能不起作用。我已经尝试过像模糊一样的模糊功能。

Answer 1

你需要使用live，因为你正在替换当前没有模糊限制的元素。

所以试试这个：

$("#textBox").live("focus",function() {

    $("#textBox").replaceWith('<textarea id="textBox">' + $(this).val() +'</textarea>');

});

$("#textBox").live("blur", function() {

    $("#textBox").replaceWith('<input type="text" class="questionInput" value="' + $(this).val() + '" id="textBox">');

});

<input name="input1" class="questionInput" id="textBox" type="text">

Answer 2

使用新元素替换元素时，您还可以附加“模糊”：

$("#textBox").focus(function() {
  $("#textBox").replaceWith('<textarea id="textBox">' + $(this).val() +'</textarea>');
  $("#textBox").blur(function() {
     // Do something on blur
});

替换元素后，也会删除侦听器。为了解决这个问题，你将一个监听器附加到表单元素的父元素，只需更改这个父元素的内容（监听器在父元素上，这样即使你改变里面的东西，它也会保持不变）。

为什么这个jQuery blur（）不起作用？

2 个答案: