Making clone to swap to html elements with hammer.js

Question

I'm trying to make swap between two divs, I mean, change one by other preserving events and everything.

Both have hammer events to detect swipe. When I make a swap elements in my project, they lost hammer events, but preserve other events like click.

To illustrate the behaviour I made this:

$(document).ready(function(){   
    $("#obj2").each(function(){
        var $this = $(this);
  var h = new Hammer(this);
  h.get("swipe").set({ direction: Hammer.DIRECTION_ALL, threshold: 1,  velocity:0.1 });
  h.on("swipe",function(ev){
   $this.text(ev.angle.toFixed(2));
        });
    }); 
    
    $("#obj1").click(function(){
      alert("this works");
    });
    
    $("#makeClone").click(function(){
        $("#obj2").text("3. swipe again :(");
        
        var aux = $("#obj2").clone(true);
        
        $("#container2").html($("#container1").clone(true));
        $("#container1").html(aux);
    });
});

div.obj,#makeClone{
    display:inline-block;
    box-sizing:border-box;
    width:300px;
    height:150px;
    text-align:center;
    border-radius:10px;
    background:#f44336;
    font:18px/150px "Lato";
    color:white;
    margin-bottom:5px;
    cursor:pointer;
}
#obj2{
    background:#4caf50;
}
#makeClone{
    background:#666;
    height:50px;
    font:12px/50px "hack";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://raw.githubusercontent.com/hammerjs/jquery.hammer.js/master/jquery.hammer.js"></script>

<div id="container1">
    <div id="obj1" class="obj">click</div>
</div>
<div id="container2">
    <div id="obj2" class="obj">1.swipe on me!</div>
</div>
<br><br>
<div id="makeClone">2.change with clone</div>

Answer 1

Do not clone your objects. Use .append instead of .html.

$(document).ready(function() {
  $("#obj2").each(function() {
    var $this = $(this);
    var h = new Hammer(this);
    h.get("swipe").set({
      direction: Hammer.DIRECTION_ALL,
      threshold: 1,
      velocity: 0.1
    });
    h.on("swipe", function(ev) {
      $this.text(ev.angle.toFixed(2));
    });
  });

  $("#obj1").click(function() {
    alert("this works");
  });

  $("#makeClone").click(function() {
    $("#obj2").text("3. swipe again :(");
    
    var d1 = $("#container1>div");
    var d2 = $("#container2>div");
    $("#container2").append(d1);
    $("#container1").append(d2);
    
  });
});

div.obj,
#makeClone {
  display: inline-block;
  box-sizing: border-box;
  width: 300px;
  height: 150px;
  text-align: center;
  border-radius: 10px;
  background: #f44336;
  font: 18px/150px "Lato";
  color: white;
  margin-bottom: 5px;
  cursor: pointer;
}

#obj2 {
  background: #4caf50;
}

#makeClone {
  background: #666;
  height: 50px;
  font: 12px/50px "hack";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://raw.githubusercontent.com/hammerjs/jquery.hammer.js/master/jquery.hammer.js"></script>

<div id="container1">
  <div id="obj1" class="obj">click</div>
</div>
<div id="container2">
  <div id="obj2" class="obj">1.swipe on me!</div>
</div>
<br><br>
<div id="makeClone">2.change with clone</div>