Home/ Questions/Q 7952027
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T02:44:19+00:00

For example I have the following HTML named index.html : <html> <head> <style> #content

  • 0

For example I have the following HTML named index.html:

<html>
<head>
    <style>
        #content { float:left; }
        #sub { float:right; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="action.js"></script>    
</head>
<body>
    <h2>Test de</h2>
    <div id="content">
        Content
        <button class="loadSub">Load</button>
    </div>
    <div id="sub">
        Sub content
    </div>
</body>
</html>

And a simple JS file named action.js:

$(document).ready(function(){
    $('button.loadSub').click(function(){
        $('#sub').load('test.html');
    });

    $('button.hide').click(function(){
        $('#sub').fadeOut('slow');
    });
});

As you can see, when I click the button .loadSub the div #sub will be loaded with the new content from test.html: 

<h2>This is the sub content</h2>
<button class="hide">Hide</button>

I got two problems here:

Firstly, the .loadSub button did successfully load the the div of id subcontent, but the .hide button did not work.

Secondly, after I had tried inserting

script type=”text/javascript” src=”action.js”

inside test.html, the hide button worked and faded out its content. But then in turn, I found out that the button loadSub no longer functioned. I couldn’t load the subcontent again.

Is there any other way around to just once declare source of js file and make my button.loadSub work whenever I click it? Could anybody please explain the problem and give me a hint to fix it.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    On the first page, put this. You can insert my JQQuery code into your action.js file. On the second page, the one you are loading into your div, put the second Jquery code I added.

    On First page:

    <html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<style>
#content{float:left;}
#sub{float:right;}
</style>

<script type="text/javascript">
$(document).ready(function(){
$(function(){
$('.loadSub').click(function(){
$('#sub').show();
$('#sub').load('test.html');
});
});
});
</script>

</head>

<body>

<h2>Test de</h2>

<div id="content">
Content
<button class="loadSub">Load</button>
</div>

<div id="sub">Sub content</div>

</body>

</html>

    On the second page (the page that’s loaded into the div, add this:

    <script type="text/javascript">
$(document).ready(function(){
$(function(){
$('.hide').unbind("click").click(function(){
$('#sub').fadeOut('slow');
});
});
});
</script>

<h2>This is the sub content</h2>
<button class="hide">Hide</button>
    • 0