Question

ERS。任何人都可以向我解释为什么模糊和焦点事件不适用于附加的输入文本字段？

正如您在 JSFIDDLE 中看到的那样。在html中创建的输入字段似乎听取模糊和焦点事件。但是当您使用追加按钮追加输入文本字段时，突然输入的文本字段不会侦听模糊/焦点事件。

HTML

<input class="input" value="value 1">
<input class="input" value="value 2">
<div id="appendinput">Append a input textfield</div>
<div id="inputcontainer"></div>

的jQuery

var counter = 0;

$("#appendinput").click(function () {
    $('<input class="input" value="value 3" type="text" id="input' + (counter) + '"/>').appendTo('#inputcontainer');
    counter++;
});


$('.input').on('focus', function () {
    thisValue = $(this).val();
    $(this).attr("value", "");
});
$('.input').on('blur', function () {
    if ($(this).val() === "") {
        $(this).val(thisValue);
    }
});

你能解释一下为什么这不适用于附加的输入文本字段吗？提前谢谢。

Answer 1

您需要使用on将事件委托给动态添加元素的父级。

<强> Live Demo

$(document).on('focus', '.input', function () {
    thisValue = $(this).val();
    $(this).attr("value", "");
});

委派事件的优势在于它们可以处理来自的事件稍后添加到文档中的后代元素。通过选择一个保证在当时存在的元素委托事件处理程序附加，您可以使用委托事件避免频繁附加和删除事件处理程序的需要， reference

为什么模糊和焦点不能处理附加的输入文本字段？

1 个答案: