All geek questions in one place

Cloning HTML5 elements and events using jQuery on IE8

I am trying to clone an HTML5 element using jQuery 1.8.1, but this jsbin example fails in IE <9 (element 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, of course, is a simplified demonstration. In my real code, I have many nested elements with several events:

My questions

  • Is this a jQuery bug or am I missing something in my code?

  • since I also clone events related to nodes that an elegant alternative could use to reproduce the same clone() behavior also in IE <9?

So far, the only workaround I have found is to copy all nodes via html() , add them via append() and refactor my code using event delegation for events related to these nodes, for example

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

But I am open to different ideas: can I use a more elegant / efficient / simpler / faster approach?

Thanks.

+4
source share
2 answers

I think that after all the comments, I could add this as an answer: the problem is that you need html5 laying (for example, html5shiv ), and it needs to be loaded before HTML5 elements appear (so that the parser does not get confused). defer attributes JSBin automatically adds , violate this behavior.

Without laying, the elements are broken. The DOM is as follows:

 <section/> My section </section/>

(as you can see from the IE8 dev tools - you should at least admire the creativity in the interpretation that works here)

This breaks all the relevant selectors (hence the text is not green in the JSBin item that you posted). The reason all the other calls (insert, add, etc.) still works is because the html you fed was the same (and would be erroneously parsed in the same way).

The solution forces the pad to fully load before your items appear, as shown in the jsFiddle counterexample , which I posted.

Hope this solves your problem. I posted a JSBin question about issues caused by deferral attributes .

Update: this should now be fixed in jsbin.

+4
source

Hi, I think the problem is really in <section> , IE8 can't understand it, I tried the Cloning Button, and the code works smoothly :-)

I tried changing your JavaScript so that it works on IE9: (DOES NOT WORK FOR <IE9)

 <script> var section = $('section'); $('button').on('click', function() { var clone = section.clone(true); $(clone).insertBefore($('section:last')); //CHANGE From insertAfter to InsertBefore }); $('section').on('click', function() { alert('hey, I am a section'); }); </script>

Now it looks like working with IE9 and other browsers.

or if you want to install new clones, the Script will be modified as follows:

 var section = $('section'); var button = $('button') $('button').on('click', function() { var clone = section.clone(true); console.log(clone); $(clone).insertBefore($('button')); }); $('section').on('click', function() { alert('hey, I am a section'); });
-1
source

Source: https://habr.com/ru/post/1433353/

More articles:


All Articles