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

Question

我动态生成

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

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

Answer 1

我很想查看您创建元素并将事件附加到其上的所有代码。我认为您没有按正确的顺序执行此操作:

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler, as described next.

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