Question

我动态生成

<input type="text" id="foo">
<label for="foo">

并将侦听器设置为 input ：

updateWithLabelInputs($("#foo"));

功能：

function updateWithLabelInputs(withLabel) {
    withLabel.die("focus").live("focus", function (e) {
        $(this).parent().find('label').hide();
    });
    withLabel.die("blur").live("blur", function (e) {
        if ($(this).val() == '') {
            $(this).parent().find('label').show();
        }
    });    
}

当我点击标签时，我希望事件被触发，但事实并非如此。有趣的是：如果同一个监听器适用于现有（非动态）html - 它可以工作。问题是什么？为什么监听器不适用于动态元素？

Answer 1

我很乐意看到您创建元素的所有代码并将事件附加到其中。我以为你没有按照正确的顺序做这件事：

事件处理程序仅绑定到当前选定的元素;他们在您的代码调用.on（）时页面上必须存在。要确保元素存在且可以选择，请执行事件绑定在文档就绪处理程序中的元素页面上的HTML标记。 如果要将新HTML注入页面，选择元素并在新HTML后附加事件处理程序放置在页面中。或者，使用委派事件来附加事件处理程序，如下所述。

早期版本：您需要https://github.com/brandonaaron/livequery来做类似的事情。或者，如果您愿意使用更高版本的jQuery，而不使用die和live，请使用.on和.off

jQuery'focus'事件不适用于动态生成的元素

1 个答案: