克隆和文档准备就绪答案

【问题标题】：Clone and document.ready克隆和文档准备就绪
【发布时间】：2014-05-06 17:14:54
【问题描述】：

我有一个包含一些必填字段的表单。我使用这样的代码在用户为空时通知用户：

$(document).ready(function() {
    $('input.required:text').focus(function() {
        $(this).css({'background-color': '#FFF'});
    });
    $('input.required:text').blur(function() {
        if ($(this).val() == '') {
            $(this).css({'background-color': 'rgba(222, 41, 30, 1)'});
        }
    });
})

问题是我还有一个“添加”按钮，它可以通过运行这个函数来克隆一个隐藏的表单：

function addlocation() {
    var clone = $('div.location-info-new').clone();
    clone.addClass('location-info');
    clone.find('form').addClass('ready');
    clone.removeClass('location-info-new');
    clone.appendTo('div.locations');
    clone.find('input.required:text').focus(function() {
        $(this).css({'background-color': '#FFF'});
    });
    clone.find('input.required').each(function (i, v) {
        $(this).css({'background-color': 'rgba(222, 41, 30, 1)'});
    });
}

我必须在此处添加背景颜色更改，否则它们在克隆表单上根本不起作用。还有一个问题。这些字段最初会在新表单上正确显示为红色，当它们获得焦点时它们甚至会变为白色。不幸的是，如果用户给输入框焦点，不输入任何内容，然后移除焦点，输入框不会变回红色。在原始表单上，这可以正常工作。

为什么 document.ready 的背景颜色变化没有应用于我的克隆表单？

【问题讨论】：

你真的应该提供一个jsFiddle
请改用delegated events。 “委托事件的优点是它们可以处理来自后代元素的事件，这些事件会在以后添加到文档中。”

标签： javascript jquery css

【解决方案1】：

因为元素是在您订阅现有元素后动态添加的。您可以使用 jQuery on 函数来订阅表单上最初将要创建的每个元素。

$(document).ready(function() {
    $(document).on('focus', 'input.required:text', function() {
        $(this).css({'background-color': '#FFF'});
    });
    $(document).on('blur','input.required:text', (function() {
        if ($(this).val() == '') {
            $(this).css({'background-color': 'rgba(222, 41, 30, 1)'});
        }
    });
})

【讨论】：

感谢您的解决方案。这很好用，尽管我仍然需要将背景颜色设置为红色以作为克隆表单的初始值。

【解决方案2】：

为什么 document.ready 的背景颜色变化没有应用于我的克隆表单？

因为新元素没有绑定此事件处理程序。您正在绑定 focus 事件处理程序：

clone.find('input.required:text').focus(function() {
    $(this).css({'background-color': '#FFF'});
});

但您没有绑定blur 事件处理程序。有几种方法可以解决您的问题：

手动绑定blur事件处理程序

只需添加

clone.find('input.required:text').blur(function() {
    if ($(this).val() == '') {
        $(this).css({'background-color': 'rgba(222, 41, 30, 1)'});
    }
});

到你的功能。

正确使用.clone

如果您查看文档，您会看到.clone 接受一个布尔参数，该参数也可以复制数据和事件处理程序。所以你可以使用

var clone = $('div.location-info-new').clone(true);

改为删除

clone.find('input.required:text').focus(function() { ... });

使用事件委托

在 jQuery 教程中有详细解释：https://learn.jquery.com/events/event-delegation/

【讨论】：

【解决方案3】：

您不能将事件直接触发到您以编程方式添加的元素。

使用on 将函数绑定到您的元素。

将您的代码更改为：

$(document).ready(function() {
    $('input.required:text').on("focus", function() {
        $(this).css({'background-color': '#FFF'});
    });
    $('input.required:text').on("blur", function() {
        if ($(this).val() == '') {
            $(this).css({'background-color': 'rgba(222, 41, 30, 1)'});
        }
    });
})

【讨论】：