多事件绑定不适用于动态内容。

Question

我有一个“输入字段组件”，比如：

<div class="input-multilingual multilingual-field">
   <div class="input-multilingual-prepend">
        <input type="text" value="" name="nameVariants[0].texts[nl_BE]">
    </div>
   <div class="input-multilingual-prepend">
        <input type="text" value="" name="nameVariants[0].texts[en_GB]">
    </div>
</div>

其中我附加了一个焦点/模糊事件，该事件适用于页面加载：

$(".multilingual-field").on({
        focus: function() {
            $(this).parents(".multilingual-field").addClass("focus");
        },
        blur: function() {
            $(this).parents(".multilingual-field").removeClass("focus");
        }
    }, ":input");

问题是，这包含在div中，一旦添加了新的“输入字段组件”，AJAX就会重新呈现内容。在那个动作之后，焦点/模糊的方法不再起作用了。

我认为通过添加":input"作为.on(...)上的一个参数，这将适用于动态内容？我遗漏了什么？

更新

看起来，如果我在$(document).on({...}, ".multilingual-field :input")上听的话，效果很好--这是为什么？:-)

Answer 1

jQuery中的事件处理程序在执行" on“函数时附加到特定的DOM节点。当DOM节点被移除并重新创建时，它正在释放它的事件侦听器。

使用"live“函数代替。

$(".multilingual-field").live("focus",
        function() {
            $(this).parents(".multilingual-field").addClass("focus");
        }
);