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

【问题标题】：Multiple event bindings is not working on dynamic content多个事件绑定不适用于动态内容
【发布时间】：2013-07-02 11:25:34
【问题描述】：

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

<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 就会重新呈现该内容。在该操作之后，焦点/模糊方法不再起作用。

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

更新

如果我在$(document).on({...}, ".multilingual-field :input") 上收听它似乎可以工作 - 为什么会这样？ :-)

【问题讨论】：

看起来您已经回答了自己的问题。在您的更新中，它的工作原理是这样的，因为那是 expected usage 的 on() 函数。您将相同的事件委托给与 :input 选择器匹配的 document 的每个后代，这听起来正是您所需要的。
您有一个具有多语言字段类的元素，它的父元素也具有多语言字段类？我相信这就是你的 JS 所说的，但你的 HTML 说的是不同的东西。

标签： jquery events

【解决方案1】：

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

改用“直播”功能。

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

【讨论】：