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

【问题标题】：jQuery 'focus' event doesn't work for dynamically generated elementjQuery 'focus' 事件不适用于动态生成的元素
【发布时间】：2013-06-03 14:26:09
【问题描述】：

我是动态生成的

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

并将监听器设置为输入：

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

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

【问题讨论】：

标签： jquery input label dynamically-generated onfocus

【解决方案1】：

我很想看到您在其中创建元素并将事件附加到它的所有代码。我认为您没有按正确的顺序进行操作：

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

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

【讨论】：

谢谢，但我不想为小任务包含整个插件
嗯，您使用的是在 jQuery 1.9 中已弃用和删除的 die 和 live 函数。您应该改用 .on。
那么让我们看看更多代码。请展示您如何创建元素并填充 myElement 变量。
updateWithLabelInputs($("#foo"));函数 updateWithLabelInputs(myElement) { myElement.die("focus").live("focus", function (e) { $(this).parent().find('label').hide(); }); myElement.die("blur").live("blur", function (e) { if ($(this).val() == '') { $(this).parent().find('label' ).show(); } });});
对不起，请在问题中粘贴，格式化。到目前为止看起来还不错，现在展示如何调用该函数。我对 withLabel 参数值更感兴趣。