克隆后 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

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

您可以通过为输入字段委派事件处理程序来解决此问题。

例如，

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

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

这样您就可以重新触发克隆元素的拖放设置。