?
Solved

After inserting HTML using JQuery's AJAX functions, new content does not respond to jquery...

Posted on 2009-04-30
5
Medium Priority
?
394 Views
Last Modified: 2012-05-06
I'm using JQuery's AJAX functions to insert text generated by a PHP file.  When the new content is displayed, the jquery hover actions that I have attached to it's DIV class do not execute.

I've created a demo to better explain:
http://alanwaldron.com/jquery-test/

Here, I'm adding additional DIV tags.  However these new DIVs do not respond to JQuery's hover function as the 4 pre-loaded.  What am I missing?  How can I get these new DIVs to be recognized by the JQuery scripts?

Thanks,
Alan

<html>
<head>
<title>JQuery Load Test</title>
 
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() { 
	var i = 4;
	$('#loader').click(function() {
		jQuery.post('newfoo.php', {'i':++i}, function(data) {
		    $('#foo-group').append(data);
		}, 'html');
		return false;
	});
	$('.foo').hover(
		function() { $(this).css('background-color','FFCC00'); },
		function() { $(this).css('background-color','DDDDDD'); }
	);
});
-->
</script>
<style type="text/css">
.foo { background-color: #DDDDDD; margin:2px; width:250px; }
</style>
</head>
 
<body>
<div id="foo-group">
	<div class="foo" id="foo1">DIV 1</div>
	<div class="foo" id="foo2">DIV 2</div>
	<div class="foo" id="foo3">DIV 3</div>
	<div class="foo" id="foo4">DIV 4</div>
</div>
<div><a href="#" id="loader">Load Additional DIV</a></div>
</body>	
</html>

Open in new window

0
Comment
Question by:hrd2imagin
  • 3
  • 2
5 Comments
 
LVL 5

Accepted Solution

by:
cdaugustin earned 500 total points
ID: 24272645
hi,

try the attached code
$(document).ready(function() { 
        var i = 4;
        $('#loader').click(function() {
                jQuery.post('newfoo.php', {'i':++i}, function(data) {
                    $('#foo-group').append(data);
 
                    $('.foo').hover(
                          function() { $(this).css('background-color','FFCC00'); },
                          function() { $(this).css('background-color','DDDDDD'); }
                    );
 
                }, 'html');
                return false;
        });
        $('.foo').hover(
                function() { $(this).css('background-color','FFCC00'); },
                function() { $(this).css('background-color','DDDDDD'); }
        );
});

Open in new window

0
 

Author Comment

by:hrd2imagin
ID: 24273099
cdaugustin,

Thanks!  That worked for this example, but in my project, I have a lot more functionality attached to each additional div.  For example, the new DIV contains a link that opens up Anyway to get all of the loaded scripts (or a subset) to apply to the inserted content?

0
 

Author Comment

by:hrd2imagin
ID: 24273105
OOPS, I meant to say:

For example, the new DIV contains a link that opens up a Facebox modal box, etc.
0
 
LVL 5

Expert Comment

by:cdaugustin
ID: 24273128
group it in a function, and do a call  to that function in the two places where you have

        $('.foo').hover(
                function() { $(this).css('background-color','FFCC00'); },
                function() { $(this).css('background-color','DDDDDD'); }
        );
0
 

Author Closing Comment

by:hrd2imagin
ID: 31576559
Your answer led me to rethink my architecture a bit and I came up with a simpler solution.  But I still implemented your answers.  So thank you!
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses
Course of the Month15 days, 2 hours left to enroll

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question