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节点后，它将丢失其事件侦听器。

改为使用“实时”功能。

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

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

1 个答案: