jquery - 多个事件绑定不适用于动态内容

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

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

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

更新

似乎如果我听$(document).on({...}, ".multilingual-field :input")它有效 - 为什么会这样？:-)

Answer 1

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

改用“直播”功能。

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