Swap content of 2 DIV's

Question

I'd like to swap the contents of 2 DIV's on "click".

DIV-1 should get the content of DIV-2.

DIV-2 should get the content of DIV-1.

I can get that to work but the DIV-content originally contained jQuery-elements and of course the "on-clicks" in the swapped-content do not work anymore.

How can I get the jquery-elements working after swapping content??

I use a hidden DIV (class="temp_backup") as a "container" for the swapping of the content......

I use following jQuery-code to swap content:

$('span.ShowNumber').click(function() {

  var getID = $(this).attr('id');
  var spanNumber = getID.replace("ShowNumber", "");

  $('div.temp_backup').html($("div[id=table-cell-1]").html());
  $("div[id=table-cell-" + spanNumber + "]").html($("div[id=table-cell-2]").html());
  $("div[id=table-cell-2]").html($('div.temp_backup').html());

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="ShowNumber" id="ShowNumber1">1</span>
<div id="table-cell-1">Content of DIV-1 with jquery elements/functions</div>

<span class="ShowNumber" id="ShowNumber2">2</span>
<div id="table-cell-2">Content of DIV-2 with jquery elements/functions</div>

<div class="class=" temp_backup " style="display:none "></div>