1

厄。谁能向我解释为什么模糊和焦点事件不适用于附加的输入文本字段？

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

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

你能向我解释为什么这不适用于附加的输入文本字段吗？先感谢您。

4

1 回答 1

4

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

现场演示

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

委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要， 参考.

于 2013-08-20T06:32:52.453 回答