innerHTML onClick issue

Question

I am trying to change the content of the div which is a part of the parent page using the child page. In order to update the content, I use innerHTML. The contents appear just fine but the onclick event on the images does not work. Here is my code, the code works in Mozilla firefox but does not work in Chrome and Safari. Also, it does not work on iPad safari browser.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>TEMP</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
        <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
        <script src="scripts/jquery-1.8.2.min.js"></script>         
        <script>
            $(document).ready(function() {
                    //this is the parent element
                    parent.document.getElementById('hd').innerHTML = document.getElementById('temp').innerHTML;
            });
        </script>
    </head>
    <body>
        <div id="fakeshare" style="float: left;margin-top: -30px;z-index:1000000;position: absolute;vertical-align: middle">    
        </div>
        <!-- this is the content I try to populate in the parent element -->
        <div id = "temp" style="visibility: hidden">
        <div style="float:left">
            <img id="backbtn2" class="imgtopbutton" src="images/facebook-cancel.png" onclick="javascript:history.go(-1)" align="left" style="margin-left:12px;margin-top:10px"/>
            <img class="imgtopbutton" src="images/facebook-post.png" align="right" style="margin-top:-31px;margin-left:545px" onclick="javascript:history.go(-1)">
        </div>
        </div>
    </body>
</html>

What do you mean by parent page and child page? Are you using iframe? — ATOzTOA
– ATOzTOA, Commented Jan 19, 2013 at 9:09
I am using modal dialog. The child page is loaded in modal dialog and the hd element is part of the parent page which works as the header of this modal dialog. — VendettaDroid
– VendettaDroid, Commented Jan 19, 2013 at 9:10

ATOzTOA · Accepted Answer · 2013-01-19 09:15:01Z

1

Just try:

$("#hd").html($("#temp").html());

answered Jan 19, 2013 at 9:15

ATOzTOA

36.1k23 gold badges101 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ATOzTOA Over a year ago

OK, need to see your parent HTML.

ATOzTOA Over a year ago

Try console.log(document); and see what you see in the DOM of the document.

VendettaDroid Over a year ago

I kind of solved my problem. But, the question would have been different for my answer so I will mark you correct for this one.

ATOzTOA Over a year ago

@VendettaDroid Can you explain what the actual issue was?

Ben Drury · Accepted Answer · 2013-01-19 09:02:54Z

1

Try using $('#hd').parent().html($('#temp').html());

answered Jan 19, 2013 at 9:02

Ben Drury

1,3762 gold badges17 silver badges34 bronze badges

1 Comment

VendettaDroid Over a year ago

I tried it, but it does not update the content of #hd. Looked at the content from chromes debug view.

Collectives™ on Stack Overflow

innerHTML onClick issue

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related