渐变框动态附加jquery

Question

如果单击按钮，则会附加一些框。接下来，您将单击该框，将添加渐变框，但不添加渐变框。如果单击另一个框而不添加渐变框，则仅添加第一个框

My Fiddle

     <script src="https://cdn.office24by7.com/add-templates/gradX.js"></script>

<button class="clbtn" name="button" value="button">button</button>

         <div class="appenddiv">
                </div>



<script>
$(document).ready(function(){
    var i = 0;  

        $(".clbtn").click(function(el){

         $.fn.myFunction = function(){ 


    gradX("#clrpik", {
    targets: [".target"]
    });


            }

        $(".appenddiv").append('<div class="target"><div class="target_text">Click Here for gradient</div></div>');

     $(".target").click(function(){

    $(".appenddiv").append('<div id="clrpik"></div>').myFunction();

     }); 

        });
});
</script>

Answer 1

附加在其他div点击上的渐变框，但它会粘贴到第一个div

使用此设置：

$(this).append('<div id="clrpik"></div>').myFunction();

});  

$(document).ready(function(){

var f = 0;	


    $(".clbtn").click(function(el){
	
	 $.fn.myFunction = function(){ 


gradX("#clrpik", {
targets: [".target"]
});
//f++;	
	
		
		}



    $(".appenddiv").append('<div class="target"><div class="target_text">Click Here for gradient</div></div>');

 $(".target").one('click', function(){
 
$(this).append('<div id="clrpik"></div>').myFunction();

});    
	
    });
	
});

.targets {
                margin:0 auto;
                text-align: center;
                border: 1px solid #ccc;
                background: #f8f8f8;
                margin: 0 auto;
                border-radius: 4px;
                width:auto;
                padding:10px;
            }

            .target_text {
                margin: 0px auto;
                margin-top: 40%;
                background: #f8f8f8;
                width: 70px;
                border: 1px solid #ddd;
                padding: 2px;
                border-radius: 2px;
                color: #111;
            }

            .target {
                border: 1px solid;
                margin: 0px 10%;
                width: 150px;
                height: 150px;
                display:inline-block;
            }
            #target {
                border-radius: 150px;
            }

            .result {
                text-align: center;
                text-transform: uppercase;
                font-weight: bold;
                padding:12px;
                padding-left: 15px;
                margin: 10px 0px;
                border: 1px solid #ddd;
                background: #f8f8f8;
            }


            .clrpik {
                height: 200px; 
                margin: 100px 34%;            
            }

<link href="https://cdn.office24by7.com/add-templates/colorpicker.css" rel="stylesheet"/>
<link href="https://cdn.office24by7.com/add-templates/gradX.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://codologic.com/page/sites/all/files/gradx/dom-drag.js"></script>
<script src="https://codologic.com/page/sites/all/files/gradx/colorpicker/js/colorpicker.js"></script>


<script src="https://cdn.office24by7.com/add-templates/gradX.js"></script>
<button class="clbtn" name="button" value="button">button</button>
        
  <div class="appenddiv">
		</div>