Клонированный элемент Jquery не активируется

Мой клонируемый элемент Jquery не кликабелен. Что я хочу, так это чтобы клонированные элементы li имели зеленый фон при нажатии. Когда клонированные элементы помещаются в Droppable div, они перестают работать с моими сценариями Jquery, а именно с этим сценарием:

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

Я пробовал несколько решений, таких как.clone (true) или.clone (true, true), я даже гуглил его, но результаты, которые я нашел, не решали мою проблему, так что это не дубликат.

...

<pre><code>

$ (документ).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
$(".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

Источник

2 ответа

Решение

Делегируйте ваш щелчок существующему элементу DOM:

$("body").on("click",".canvas .columns .price li", function(){
   $(this).css("backgroundColor", "green");
});
Источник

Этот код:

$(".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>

Источник
Другие вопросы по тегам