Imagine a website where the content is loaded via a menu with using jQuery .post() (or .get()).
Imagine that inside this dynamic loaded content should be another jQuery post to show some more things under the content
(all without navigating to a new file in the address bar)
Here is what i mean (but only the base frame...):
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="text" name="n" id="n" placeholder="Search..." />
<button id="click1">Go</button>
<!-- the result of the search will be rendered inside this div -->
<br />
<div id="result" name="result"></div>
<script>
window.onload = (function(){
/* attach a submit handler to the button */
$("#click1").click(function(event) {
$.ajax({
url: 'test.php',
type: 'POST',
data: 'n: term',
success: function(msg) {
$( "#result" ).empty().append( msg );
}
});
});
});
</script>
</body>
</html>
So, stop laughing, I know that the page only loads itself in the div and this is not working because of the same IDs... it´s not Inception here ;-)
But even if I link a completely new page to it with new IDs it is not working...
Is it possible to add a new jQuery AJAX inside an existing, already with jQuery AJAX loaded content?
I think yes, but I can´t find my mistake...
/EDIT
I think I need to give a bit more input:
test.php
<input type="text" name="n" id="n" placeholder="Search..." />开发者_StackOverflow社区;
<button id="click1">Go</button>
<div id="result" name="result"></div>
<script>
window.onload = (function(){
$("#click1").click(function(event) {
$.ajax({
url: 'test2.php',
type: 'POST',
data: 'n: term',
success: function(msg) {
$( "#result" ).empty().append( msg );
}
});
});
$("#click2").click(function(event) {
$.ajax({
url: 'test3.php',
type: 'POST',
data: 'n2: term',
success: function(msg) {
$( "#result2" ).empty().append( msg );
}
});
});
});
</script>
test2.php
<input type="text" name="n2" id="n2" placeholder="Search..." />
<button id="click2">Go</button>
<div id="result2" name="result2"></div>
test3.php
<?php
echo 'It´s working!';
?>
My final question: Why is it not working? Why does it not output "It´s working!" at the end?
You can put another post inside the success handler of the first post:
$("#click1").click(function(event) {
$.ajax({
url: 'test.php',
type: 'POST',
data: 'n: term',
success: function(msg) {
$( "#result" ).empty().append( msg );
$.ajax({/* params here */});
}
});
});
When $("#click2").click(..); runs, the #click2 element does not exist, so it doesn't work.
You can either move $("#click2").click(..); to inside the success handler for the first request, or you can use .live().
I believe the issue is the use of window.onload in the AJAX response. window.onload has already fired for the window. You are not loading a new window so this will not fire. Try removing that and see if it works.
as far as i have understood you need to use live with the dynamically added elements like
$("#click2").live("click",function(){
//do ajax here
});
or you can use delegate
$("#result").delegate("#click2","click",function(){
// do the ajax here
});
jquery live
jquery delegate
![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif)
加载中,请稍侯......
精彩评论