JQuery draggable functionality not working on correct element after cloning

Question

I have a page with similar main div-elements all containing the same structure. The main element is droppable and the child element with images is draggable. Dragging the child element with the images and dropping it in another main element combines the dragged images with the images in the main element it's dropped into. At the end of the main element, there are input fields with functionality behind the focus, blur and change events to check/control the input.

So I can combine images of two main elements, but I also want to divide images into two main elements. With a click on the "image_divider"-div I now clone the full main element with all functionality (clone with deepWithEventsAndData) and then remove the unneeded images in each of the duplicate main elements.

All goes well (the focus-, blur- and change events keep working on the cloned input fields), but dragging the images of the cloned main element, still drags the images of the original main element it was cloned of.

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.

I saw that cloning also copies the eventnamespace from the original main element, maybe this has something to do with it. I don't know what else is being copied that should be adapted for the cloned main element instead of being blindly copied or how to remove the draggable/droppable functionality on the cloned element and reattach them after the clone, so it works on its own elements instead of on the elements of the originial main element.

Can anybody point me in the right direction?

The 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();

    });

The main element I have several times on the page

<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.

You can fix this issue by delegating the event handlers for the input fields.

For example,

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

This will work for dynamically generated elements matching the selector passed as second argument to .on() method.

So that you can re-trigger the drag and drop set up for cloned elements.