如果DIV使用重定向按钮加载子页面，如何更新部分页面（DIV）？

Question

I'm confused with that I can embed a child-page into the parent-page's DIV, but I can't restrict any actions of the child-page within such DIV. If I push the button which is belong to the child-page, it will refresh whole page to the new one. Not partially updating.

My HTML is as follows:

The parent-page:

        < div id="container" >
        < /div>

        <script>
         $("#container").load("/child-page/");
        </script>

The child-page:

        < input type="button" name="Create" 
          value="Create" 
          onclick="$("#container").load("/child-page/")" />

How can I only update the parent-page's DIV without refreshing whole page ?

Best regards, Josh

Answer 1

<div id="container"></div>
<input type="button" name="flavor_create_btn" value="Create Flavor" />
<script>
$(document).ready(function(){
   $('input[name="flavor_create_btn"]').on('click', function(){
      $("#container").load("/child-page/");
   });
});
</script>

Answer 2

Your parent-page.html page should be:

<script type="text/javascript" language="javascript">
$(document).ready(function(){
    $("#container").load("./child-page.html");
});
</script>

<marquee>Parent Page!</marquee>
<div id="container"></div>

and your child-page.html should be:

<input type="button" name="Create" value="Create" onclick="$('#container').load('./child-page.html')" />

Also you can use \\" instead of ' . So onclick="$("#container").load("/child-page/")" is incorrect!.

I used marquee tag to tell you that the whole parent page is not refreshed.