CODEWITHSUNDEEP
javascriptjquery
kevin
kevin

Reputation: 3

jQuery stops working after loading content into a div

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.

Upvotes: 0

Views: 3364

Answers (3)

Patriotec
Patriotec

Reputation: 1144

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>

Upvotes: 1

Richard Dalton
Richard Dalton

Reputation: 35793

The hide button isn't on the page when you try to bind the event so it is never registered.

Change it to use on like this (assuming version 1.7+)

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

or delegate if an older version:

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

This attaches the event handler at the document level so will work for any new content added to the page.

Upvotes: 1

Richard Neil Ilagan
Richard Neil Ilagan

Reputation: 14737

You're loading dynamic HTML into your page. This means that at the time you called $('button.hide').click(), the button.hide element did not exist in your page yet, so the click handler could not be attached.

You might want to try doing a delegate attachment instead.

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

Upvotes: 2

Related Questions