Axmed nuur Axmed nuur - 1 month ago 5x
jQuery Question

Jquery clonned element is not clickable

My Jquery clonable element is not clickable. What i want is the cloned li elements to have a green background when they are clicked. When the cloned elements are dropped to droppable div, they stop working with my Jquery scripts specifically this script:

$(".canvas li").on("click", function(){ $(".canvas li").css("backgroundColor", "green"); });.

I tried multiple solutions like .clone(true) or .clone(true, true), i even googled it but the results i found were not solving my problem , so this is not a duplicate.



$(document).ready(function() {

var counts = [0];

// use a helper-clone that is append to "body" so is not "contained" by a pane
helper: function() {
return $(this).clone(true).removeClass("add-element").appendTo(".canvas").css({
"zIndex": 5
start: function() { counts[0]++},
cursor: "move",
containment: "document"

$(".canvas, .canvas *").droppable({
accept: ".add-element",
drop: function(event, ui) {
if (!ui.draggable.hasClass("dropped"))
var prr = $(' <style>* { box-sizing: border-box;}.columns { float: left; width: 33.3%; padding: 8px;}.price { list-style-type: none; border: 1px solid #eee; margin: 0; padding: 0; -webkit-transition: 0.3s; transition: 0.3s;}.price:hover { box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)}.price .header { background-color: #111; color: white; font-size: 25px;}.price li { border-bottom: 1px solid #eee; padding: 20px; text-align: center;}.price .grey { background-color: #eee; font-size: 20px;}.button { background-color: #4CAF50; border: none; color: white; padding: 10px 25px; text-align: center; text-decoration: none; font-size: 18px;}@media only screen and (max-width: 600px) { .columns { width: 100%; }}</style><h2 style="text-align:center">Here is Product Tables</h2><div class="columns"> <ul class="price"> <li class="header" onclick="mfunction()">Foods</li> </ul></div><div class="columns"> <ul class="price"> <li class="header" style="background-color:#4CAF50">Clothings</li> </ul></div><div class="columns"> <ul class="price"> <li class="header">Phones</li> </ul></div>');
$('.canvas .add-element').addClass("gog-"+counts[0]);
$(".canvas .header").addClass("pricet");
$(".canvas .mm").remove();
$(".canvas .pricet").removeClass("add-element");
placeholder: "sort-placer",
cursor: "move",
helper: function (evt, ui) {
return $(ui).clone(true).appendTo(".canvas").show();

// here is the place that i'm struggling with
$(".canvas .columns .price li").on("click", function(){
$(".canvas .columns .price li").css("backgroundColor", "green");


<pre><code> body { padding:0; margin:0; font:15px arial; }
.navbar { padding:5px; }
.navbar[align=center] > * { display:block; cursor:pointer; width:95%; padding:5px; color:#fff; text-align:center; }
.navbar .header { background:#66d; }
.navbar .div { background:#6dd; }
.navbar .span { background:#6d6; }
.navbar .footer { background:#d66; }
.noselect {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;

.navbar {
top:0; right:0; bottom:0;

.canvas {
top:0; left:0; right:300px; bottom:0;
background:#ccc; overflow: auto;

.sort-placer {
border:2px solid orange;



<div class="canvas"></div>

<div class="navbar" align="center">
<header class="header noselect add-element">products</header>


So here is the CodePen: CodePen


Delegate your click to an exsisting DOM element:

$("body").on("click",".canvas .columns .price li", function(){
   $(this).css("backgroundColor", "green");