Jquery 克隆的元素不可点击

Question

我的 Jquery 可克隆元素不可点击。我想要的是克隆的 li 元素在单击时具有绿色背景。当克隆的元素被放置到可放置的 div 时，它们将停止使用我的 Jquery 脚本，特别是这个脚本：

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

我尝试了多种解决方案，如 .clone(true) 或 .clone(true, true)，我什至用谷歌搜索了它，但我发现的结果并没有解决我的问题，所以这不是重复的。

...

<pre><code>

$(文档).ready(函数() {

    var counts = [0];

  $(".add-element").draggable({
    //  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
      }).show();
    },
     start: function() { counts[0]++},
    cursor: "move",
    containment: "document"
  });

  $(".canvas, .canvas *").droppable({
    accept: ".add-element",
    drop: function(event, ui) { 
      if (!ui.draggable.hasClass("dropped"))
        $(this).append($(ui.draggable).clone(true).removeClass("ui-draggable").removeClass("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>');
      $(".columns").sortable();
      $('.canvas .add-element').addClass("gog-"+counts[0]);
      $(prr).appendTo(".gog-"+counts[0]);
      $(".canvas .header").addClass("pricet");
      $(".canvas .mm").remove();
      $(".canvas .pricet").removeClass("add-element");
    }
  }).sortable({
    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 {
  position:absolute;
  top:0; right:0; bottom:0;
  width:300px;
  background:#333;
}

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

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

...

<pre><code>

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

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

</div>

** 所以这是 CodePen：CodePen

Answer 1

将您的点击委托给现有的 DOM 元素：

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

Answer 2

此代码：

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

必须更改为：

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

因为元素“.canvas li”是动态创建的，所以在文档就绪时不可用。

片段：

$(document).ready(function() {

  var counts = [0];

  $(".add-element").draggable({
    //  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
      }).show();
    },
    start: function() { counts[0]++},
    cursor: "move",
    containment: "document"
  });

  $(".canvas, .canvas *").droppable({
    accept: ".add-element",
    drop: function(event, ui) {
      if (!ui.draggable.hasClass("dropped"))
        $(this).append($(ui.draggable).clone(true).removeClass("ui-draggable").removeClass("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>');
      $(".columns").sortable();
      $('.canvas .add-element').addClass("gog-"+counts[0]);
      $(prr).appendTo(".gog-"+counts[0]);
      $(".canvas .header").addClass("pricet");
      $(".canvas .mm").remove();
      $(".canvas .pricet").removeClass("add-element");
    }
  }).sortable({
    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
});

function mfunction() {
}

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

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 {
  position:absolute;
  top:0; right:0; bottom:0;
  width:300px;
  background:#333;
}

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

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

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

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

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

</div>

Jquery 克隆的元素不可点击

Jquery clonned element is not clickable

jquery

jquery-ui

jquery-ui-draggable

jquery-ui-droppable

jquery-clone

...

...

...