Question

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

$(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应用到我克隆的表单？

Answer 1

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

$(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)'});
        }
    });
})

Answer 2

为什么text.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/

Answer 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)'});
        }
    });
})

克隆和document.ready

3 个答案: