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
Solved

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

Posted on 2012-03-26
5
662 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
  • 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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Page auto-refreshes when scrolled on iPhone. 5 53
jQuery on Submit 4 38
Only allow one check box 17 24
Why is initialize not a function? 8 17
Displaying an arrayList in a listView using the default adapter is rarely the best solution. To get full control of your display data, and to be able to refresh it after editing, requires the use of a custom adapter.
Since upgrading to Office 2013 or higher installing the Smart Indenter addin will fail. This article will explain how to install it so it will work regardless of the Office version installed.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

809 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