Knowledge Walls
John Peter
Pune, Maharashtra, India
How to copy element to iframe in JQuery with Event Handler
7504 Views
Clone(boolean [copy event handler]) method is used to clone / copy / duplicate element in jquery. Here in this example div cloned / copied to iframe and its click event working even after cloning element.
Example
<html>
    <head>
        <title>HTML-JQuery</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        
        <script type="text/javascript">
            $(function(){
                $("#txt_button").click(function(){
                    alert("Yes it is!");
                });
                
                //But with id selector will make problem. Try to use class instead of id selector
                $("#txt_button").clone(true).appendTo($("#my_iframe").contents().find("body"));
            });
        </script>
    </head>
    <body>
         <!-- HTML statements -->
         <button id="txt_button">
              Do it
         </button>
         <iframe id="my_iframe"></iframe>
    </body>
</html>
Demo 
Best Lessons of "One day One Thing to Know"
Top lessons which are viewed more times.
  Copyright © 2014 Knowledge walls, All rights reserved
KnowledgeWalls
keep your tutorials and learnings with KnowledgeWalls. Don't lose your learnings hereafter. Save and revise it whenever required.
Click here for more details