无法使用 Jquery 添加的元素执行任何功能答案

【问题标题】：Couldn't execute any function with Elements added by Jquery无法使用 Jquery 添加的元素执行任何功能
【发布时间】：2013-11-15 22:33:16
【问题描述】：

我想使用 Jquery 将元素动态添加到现有 div。这是 HTML：

<div id="color_div" style="min-width: 100px; min-height: 60px; float: left; background: #fff;"></div>
<a href="javascript:void(0)" onclick="add_div()" >
Add new Element
</a>

这是添加新元素的 Jquery 函数

add_div = function(){
    var new_color_div = '<div style="width: 140px;"><input type="text" name="color_name[]" class="product_color_input" /></div>';
    $('#color_div').append(new_color_div);
}

现在我想在输入时更改输入背景

$(document).ready(function(){
        $('.product_color_input').each(function(){
            $(this).keyup(function(){
                var code = $(this).val();
                if (code.length==6){
                    $(this).css('background','#'+code);
                }else{
                    $(this).css('background','#ffffff');
                }
            });
        });
    });

但它不起作用。它无法识别附加到“color_div”div 的任何新元素。

为什么？

【问题讨论】：

标签： jquery html dynamic append

【解决方案1】：

由于您正在处理动态添加的元素，因此您需要使用事件委托

$(document).on('keyup', '.product_color_input', function () {
    var code = $(this).val();
    if (code.length == 6) {
        $(this).css('background', '#' + code);
    } else {
        $(this).css('background', '#ffffff');
    }
});

也作为旁注
无需使用.each() 循环来注册 keyup 事件处理程序，您可以使用 jQuery 提供的链接属性，框架将遍历选择器集的每个元素并将处理程序注册到每个元素.所以你不必自己迭代

$(document).ready(function () {
    $('.product_color_input').keyup(function () {
        var code = $(this).val();
        if (code.length == 6) {
            $(this).css('background', '#' + code);
        } else {
            $(this).css('background', '#ffffff');
        }
    });
});

【讨论】：

感谢您的回答。它对我有很大帮助。还有一个问题：在我的情况下如何使用 jquery colorpicker 插件？

【解决方案2】：

尝试这样的事情，使用 id (color_div) 而不是使用文档。会更快

        $(document).ready(function(){
            $('#color_div').on('keyup', '.product_color_input', function () {
                var code = $(this).val();
                if (code.length == 6) {
                    $(this).css('background', '#' + code);
                } else {
                    $(this).css('background', '#ffffff');
                }
            });
        });

【讨论】：