Solved

JQuery Events doesn't work after reload PHP with JQUERY .load()

Posted on 2012-03-26
5
665 Views
Last Modified: 2012-08-14
Hello Experts

I have a little Problem ...
I have to reload a PHP-Script per JQuery .load()
The PHP-Script includes a Button that triggers a JQuery .click() event.
The .click() Event reload the PHP-Script in a DIV ...
After reloading the Script, the .click() doesn't work ...

here is my code for examle ...

index.php
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

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

<style type="text/css">
	
#testdiv h2.h2newcolor {
	color: #00FF00;
}
</style>

</head>
<body>


<div id="testdiv">
<?php	
	include 'load.php';
?>	
</div>

<script type="text/javascript">
	
$('#mybutton').click(function(){
		$("#testdiv").load("load.php");
		alert('loading ready');
});
	
</script>

</body>
</html>

Open in new window


and her the PHP-Script for load/reload ...
load.php
<?php

	echo "<h2 class=\"h2newcolor\">MyNewTitle</h2><br />\n";
	echo "<input type=\"button\" id=\"mybutton\" />\n";

?>

Open in new window


I hope anyone can help

Thanx

Talki
0
Comment
Question by:Talki
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
5 Comments
 
LVL 7

Expert Comment

by:designatedinitializer
ID: 37765434
I guess that when you load new stuff into the document, you lose the reference to #mybutton.
You can try including the JS script inside the load.php, like this:
<?php
	echo "<h2 class=\"h2newcolor\">MyNewTitle</h2><br />\n";
	echo "<input type=\"button\" id=\"mybutton\" />\n";

?>
<script type="text/javascript">
$('#mybutton').click(function(){
		$("#testdiv").load("load.php");
		alert('loading ready');
});
</script>

Open in new window

0
 

Author Comment

by:Talki
ID: 37765459
hello ...

that's right ...

but i have to lode more than one div's ...

in this case jquery is two, three or fourtimes in the html source ...

i dont know if this make any problems or more than one events are running ...

thanx

talki
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 37765539
Try this

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">
function loadIt() {
  $("#testdiv").load("load.php",function() {
    alert('loading ready');
  });
}
$(document).ready(function() {
  $('#mybutton').live("click",function(){
    loadIt();
  });
  loadIt();
});
</script>
<style type="text/css">
#testdiv h2.h2newcolor {
	color: #00FF00;
}
</style>
</head>
<body>
<div id="testdiv"></div>
</body>
</html>

Open in new window

0
 

Author Comment

by:Talki
ID: 37765840
good idea ...

i think this can be the right way ... i try it ;-)

thanx

talki
0
 

Author Comment

by:Talki
ID: 37768506
hi,

i'am ready with testing, and it works very fine ...
thanx for your fast help ...

bye

talki
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This is about my first experience with programming Arduino.
Make the most of your online learning experience.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Six Sigma Control Plans

717 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