I'm trying to clone a HTML5 element with jQuery 1.8.1, but [this example jsbin](http://jsbin.com/ogebeg/13/edit) fails on IE<9 (element is not cloned)

Code (simplified)

```
<head>
  <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>

  <!--[if lt IE 9]>
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>

  <section>My section</section>
  <button>Clone section</button>
  ...

  <script>
  var section = $('section');
  $('button').on('click', function() {
    var clone = section.clone(true);
    $(clone).insertAfter($('section:last'));
  }); 

  $('section').on('click', function() {
     alert('hey, I am a section');
  }); 
  </script>

</body>

```

This is, of course, a simplified demo. In my real code I have many nested elements with several events: 

**My questions** 

1. is this a bug of jQuery or did I miss something in my code?
2. since I'm also cloning the events associated with nodes, which elegant alternative could I use to reproduce the same behaviour of `clone()` also on IE<9 ?

So far the only workaround I've found is to copy all the nodes via `html()`, append them via `append()` and refactor my code taking advantage of **event delegation** for events associated to those nodes, like so

```
  $('body').on('click', 'section', function() {
     alert('hey, I am a section');
  }); 

```

But I'm opened to different ideas: could I use a more elegant/performant/easier/faster approach ?

Thank you.