javascript - 克隆后，JQuery 可拖动功能无法在正确的元素上工作

Question

我有一个页面，其中包含相似的主要 div 元素，并且全部包含相同的结构。主元素是可放置的，带有图像的子元素是可拖动的。将子元素与图像一起拖动并将其放入另一个主元素中，会将拖动的图像与其放入的主元素中的图像组合起来。在主元素的末尾，有一些输入字段，其功能背后有焦点、模糊和更改事件以检查/控制输入。

所以我可以组合两个主要元素的图像，但我也想将图像分成两个主要元素。现在，通过单击“image_divider”-div，我克隆了具有所有功能的完整主元素(使用 deepWithEventsAndData 进行克隆)，然后删除每个重复主元素中不需要的图像。

一切顺利(焦点、模糊和更改事件继续在克隆的输入字段上工作)，但是拖动克隆的主元素的图像，仍然会拖动它所克隆的原始主元素的图像的。

我尝试在没有 deepWithEventsAndData 或 withEventsAndData 的情况下进行克隆，克隆后重新触发 setupDragDrop 函数，然后对克隆的主元素进行拖放操作，但随后我失去了模糊、焦点和更改事件的功能输入字段，因为它没有被复制。

我看到克隆还从原始主元素中复制了事件命名空间，也许这与它有关。我不知道还应该复制哪些内容来适应克隆的主元素，而不是盲目复制，也不知道如何删除克隆元素上的可拖动/可放置功能并在克隆后重新附加它们，因此它可以独立工作元素而不是原始主元素的元素上。

有人能指出我正确的方向吗？

JavaScript:

    setupDragDrop();

    function setupDragDrop() {
      $("html").find(".serie_row .links").draggable({ axis: "y", revert: true});
      $("html").find(".serie_row").droppable({
        accept: ".links",
        hoverClass: "hilite-droppable",
        drop: function( event, ui ){
          // Add images and dividers at the end of the droppable serie
          ui.draggable.find("div").appendTo($(this).find(".links"));
          // Remove empty series
          $("html").find(".serie_row .links").not(":has(.image)").parents(".serie_row").remove().fadeOut();
        }
      });
    }

    $(".image_divider").click(function() {
      var serie_row = $(this).parents(".serie_row");
      serie_row.after(serie_row.clone(true).fadeIn());

      var new_serie_row = serie_row.next(".serie_row");

      // Remove all divided elements from first serie
      $(this).nextAll(".image").remove().fadeOut();
      $(this).nextAll(".image_divider").remove().fadeOut();
      var n = $(this).index();
      $(this).remove().fadeOut();

      // Remove all elements for first serie from cloned serie
      new_serie_row.find(".links").find("div").slice(0,n+1).remove().fadeOut();

    });

我在页面上多次出现的主要元素

<div class="row serie_row ui-droppable">
  <input type="hidden" class="serial" value="1" name="serial">
  <div class="col-lg-9">
    <div class="links ui-draggable ui-draggable-handle" id="links1" style="position: relative;">
      <div class="image">
        <a title="IMG_0195.JPG" href="/IMG_0195.JPG">
          <img alt="IMG_0195.JPG" src="/IMG_0195.JPG">
        </a>
      </div>
      <div class="image_divider"></div>
      <div class="image">
        <a title="IMG_0196.JPG" href="/IMG_0196.JPG">
          <img alt="IMG_0196.JPG" src="IMG_0196.JPG">
        </a>
      </div>
      <div class="image_divider"></div>
      <div class="image">
        <a  title="IMG_0197.JPG" href="/IMG_0197.JPG">
          <img alt="IMG_0197.JPG" src="/IMG_0197.JPG">
        </a>
      </div>
    </div>
  </div>
  <div class="col-lg-3">
    <div class="row info_pv">
      <div class="col-lg-3 col-lg-offset-1"> 
         <div class="caption text-center">Type</div>
         <div>
           <select class="form-control eltype">
             <option> </option>
             <option>Type 1</option>
             <option>Type 2</option>
             <option>Type 3</option>
             <option>Type 4</option>
           </select>
         </div>
       </div>
       <div class="col-lg-4">
         <div class="caption text-center">Nummer</div>
         <div>
           <input type="text" class="form-control input-large elnumber" name="elnumber">
         </div>
       </div>
         <div class="col-lg-3">
           <div class="caption text-center">Jaar</div>
           <div>
             <select class="form-control elyear">
               <option></option>
               <option>2014</option>
               <option>2013</option>
             </select>
           </div>
         </div>
       <div class="col-lg-1">
     </div>
   </div>
 </div>

Answer 1

I tried to clone without deepWithEventsAndData or withEventsAndData, retrigger the setupDragDrop function after cloning and then the dragging and dropping works on the cloned main element, but then I loose the funtionality of the blur-, focus- and change-events on the input fields because it's not copied over.

您可以通过委托(delegate)输入字段的事件处理程序来解决此问题。

例如，

$(document).on("blur","input",function(){
  // logic
});

这适用于与作为第二个参数传递给 .on() 的选择器匹配的动态生成的元素。方法。

以便您可以重新触发为克隆元素设置的拖放设置。