通过jQuery更改新添加的元素的颜色

这是我的代码:

 jQuery(document).on('change', 'input[type=color]', function(picker) {
          

            var color_chng = jQuery(this).closest('.input-group').attr('id');

            jQuery('.card-txt[id=p' + color_chng + ']').css('color', picker.currentTarget.value);
        });
       
        jQuery(document).ready(function() {

            
            var img_url = jQuery("#pro-image").attr('src');
            jQuery(".edit-image").css('background', 'url(' + img_url + ')');
            jQuery(".hide-img").attr('src', img_url);
            jQuery(".edit-btn").find(".elementor-button-link").click(function() {
                jQuery(".edit-box").show();
            });

            //input keyup

            jQuery(document).on('keydown, keyup', '.input-group input[type="text"]', function() {

                var texInputValue = jQuery(this).val();
                var input_id = jQuery(this).parent().attr('id');
                jQuery('.edit-image span[id=p' + input_id + ']').html(texInputValue);
            });


            // Draggable

            (function(jQuery) {
                jQuery.fn.drags = function(opt) {

                    opt = jQuery.extend({
                        handle: "",
                        cursor: "move"
                    }, opt);

                    if (opt.handle === "") {
                        var jQueryel = this;
                    } else {
                        var jQueryel = this.find(opt.handle);
                    }

                    return jQueryel.css('cursor', opt.cursor).on("mousedown", function(e) {
                        if (opt.handle === "") {
                            var jQuerydrag = jQuery(this).addClass('draggable');
                        } else {
                            var jQuerydrag = jQuery(this).addClass('active-handle').parent().addClass('draggable');
                        }
                        var z_idx = jQuerydrag.css('z-index'),
                            drg_h = jQuerydrag.outerHeight(),
                            drg_w = jQuerydrag.outerWidth(),
                            pos_y = jQuerydrag.offset().top + drg_h - e.pageY,
                            pos_x = jQuerydrag.offset().left + drg_w - e.pageX;
                        jQuerydrag.css('z-index', 1000).parents().on("mousemove", function(e) {
                            jQuery('.draggable').offset({
                                top: e.pageY + pos_y - drg_h,
                                left: e.pageX + pos_x - drg_w
                            }).on("mouseup", function() {
                                jQuery(this).removeClass('draggable').css('z-index', z_idx);
                            });
                        });
                        e.preventDefault(); // disable selection
                    }).on("mouseup", function() {
                        if (opt.handle === "") {
                            jQuery(this).removeClass('draggable');
                        } else {
                            jQuery(this).removeClass('active-handle').parent().removeClass('draggable');
                        }
                    });

                }
            })(jQuery);

            jQuery('.draggble').drags();










            // Duplicate 

            var buttonAdd = jQuery(".addtxt");
            var buttonRemove = jQuery(".removetxt");
            var className = ".input-group";
            var className2 = ".card-txt";
            var count = 0;
            var field = "";
            var field2 = "";
            var maxFields = 5;

            function totalFields() {
                return jQuery(className).length;
            }

            function addNewField() {
                count = totalFields() + 1;

                field2 = jQuery("#ptxtgrp1").clone();
                field2.attr("id", "ptxtgrp" + count);
                field2.html("");
                field2.attr('style', '');

                jQuery(field2).drags();
                field = jQuery("#txtgrp1").clone();
                field.attr("id", "txtgrp" + count);

                field.find("input").val("");
                jQuery(className + ":last").after(jQuery(field));
                jQuery(className2 + ":last").after(jQuery(field2));
                count++;
            }

            function removeLastField() {
                if (totalFields() > 1) {
                    jQuery(className + ":last").remove();
                    jQuery(className2 + ":last").remove();
                }
            }

            function enableButtonRemove() {
                if (totalFields() === 2) {
                    buttonRemove.removeAttr("disabled");
                    buttonRemove.addClass("shadow-sm");
                }
            }

            function disableButtonRemove() {
                if (totalFields() === 1) {
                    buttonRemove.attr("disabled", "disabled");
                    buttonRemove.removeClass("shadow-sm");
                }
            }

            function disableButtonAdd() {
                if (totalFields() === maxFields) {
                    buttonAdd.attr("disabled", "disabled");
                    buttonAdd.removeClass("shadow-sm");
                }
            }

            function enableButtonAdd() {
                if (totalFields() === (maxFields - 1)) {
                    buttonAdd.removeAttr("disabled");
                    buttonAdd.addClass("shadow-sm");
                }
            }

            buttonAdd.on("click", function() {
                addNewField();
                enableButtonRemove();
                disableButtonAdd();
            });

            buttonRemove.on("click", function() {
                removeLastField();
                disableButtonRemove();
                enableButtonAdd();
            });


            // Hide Show Texts
            jQuery(document).on('click', '.show', function() {
                var txt_id = jQuery(this).parent().attr('id');
                jQuery(".card-txt[id=p" + txt_id + "]").toggle();

                jQuery(this).toggleClass("hide");
            });

            // Font Size Change
            jQuery(".input-group").each(function() {

                jQuery(document).on('click', '.font-up', function() {
                    var ftxt_id = jQuery(this).parent().attr('id');

                    var size = jQuery('.card-txt[id=p' + ftxt_id + ']').css("font-size");

                    size = parseInt(size, 10);
                    if ((size + 2) <= 70) {

                        jQuery('.card-txt[id=p' + ftxt_id + ']').css("font-size", "+=2");

                    }
                });
                jQuery(document).on('click', '.font-down', function() {
                    var ftxt_id = jQuery(this).parent().attr('id');

                    var size = jQuery('.card-txt[id=p' + ftxt_id + ']').css("font-size");
                    size = parseInt(size, 10);
                    if ((size - 2) >= 12) {
                        jQuery('.card-txt[id=p' + ftxt_id + ']').css("font-size", "-=2");
                    }
                });



            });

            


        });
 .edit-box {
            width: 600px;height:300px;
            margin: 0 auto;
            display: block;
            border: 2px solid #dddddd;
            border-radius: 10px;
            background: #eee;
        }
        
        body {
            height: 3000px;
        }
        /***************************/
        
        .edit-image {
            background-size: cover;
            width: max-content;
            display: block;
            background: red;
            margin: 40px auto;
            position: relative;width:200px;height:200px;backgrounf:red;
        }
        
        .edit-contents {
            width: 80%;
            display: block;
            margin: 20px auto;
            background: #fff;
            padding: 20px;
        }
        
        .card-txt {
            position: absolute;
            top: 50%;
            left: 50%;
        }
        
        .show,
        .font-up,
        .font-down {
            background: green;
            width: 20px;
            height: 20px;
            display: inline-block;
            color: #fff;
            margin: 0 5px;
            font-size: 16px;
            cursor: pointer;
        }
        
        .addtxt,
        .removetxt {
            margin: 10px;
            display: inline;
        }
        
        .show.hide {
            background: red;
        }
        
        [type='color'] {
            -moz-appearance: none;
            -webkit-appearance: none;
            appearance: none;
            padding: 0;
            width: 15px;
            height: 15px;
            border: none;
        }
        
        [type='color']::-webkit-color-swatch-wrapper {
            padding: 0;
        }
        
        [type='color']::-webkit-color-swatch {
            border: none;
        }
        
        .color-picker {
            padding: 10px 15px;
            border-radius: 10px;
            border: 1px solid #ccc;
            background-color: #f8f9f9;
        }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="edit-box">
        <div class="edit-image">
            <img class="hide-img" src="" style="visibility: hidden;" />
            <span class="card-txt draggble" id="ptxtgrp1"></span>
        </div>
        <div class="edit-contents">

            <button type="button" class="addtxt">Add</button>
            <button type="button" class="removetxt">remove</button>

            <div class="input-group" id="txtgrp1">
                <input class="inptxt" type="text">
                <i class="show"></i>
                <i class="font-up">+</i>
                <i class="font-down">-</i>
                <span class="color-picker">
                    <label for="colorPicker">
                    <input type="color" value="#1DB8CE" class="colorPicker" >

                   </label>
                </span>
            </div>


        </div>
    </div>

如您所见,我需要将新文本动态地添加到“编辑图像”框中,并且我需要用户更改添加文本的大小和颜色。 DOM中已经存在的第一个输入框更改颜色工作正常 但是当我通过jQuery代码添加另一个输入框时,更改颜色功能不起作用 如果您能帮助我找出原因并解决问题,我将不胜感激

评论