Question

想象一个网站，使用jQuery .post（）（或.get（））通过菜单加载内容。

想象一下，在这个动态加载的内容中应该是另一个jQuery帖子，以在内容下显示更多内容

（所有这些都没有导航到地址栏中的新文件）

这就是我的意思（但只有基本框架......）：

<!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>

所以，别笑了，我知道页面只会在div中加载，因为ID相同而无法正常工作...... not Inception here; - ）

但即使我用一个新的ID链接一个全新的页面，它也无法正常工作......

是否可以在已加载jQuery AJAX的现有内容中添加新的jQuery AJAX？

我想是的，但我找不到我的错误......

/ EDIT

我想我需要提供更多的输入：

test.php的

<input type="text" name="n" id="n" placeholder="Search..." />
<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!';
?>

我的最后一个问题：为什么它不起作用？为什么不输出“它正在工作！”最后？

Answer 1

您可以在第一篇文章的成功处理程序中添加另一篇文章：

$("#click1").click(function(event) {
    $.ajax({
        url: 'test.php',
        type: 'POST',
        data: 'n: term',
          success: function(msg) {
            $( "#result" ).empty().append( msg );

            $.ajax({/* params here */});
          }
     });
});

Answer 2

当$("#click2").click(..);运行时，#click2元素不存在，因此不起作用。

您可以将$("#click2").click(..);移至第一个请求的success处理程序内，也可以使用.live()。

Answer 3

我认为问题是在AJAX响应中使用window.onload。 window.onload已经为窗口开火了。您没有加载新窗口，因此不会触发。尝试删除它，看看它是否有效。

Answer 4

据我了解，您需要将live与动态添加的元素（如

）一起使用

$("#click2").live("click",function(){

//do ajax here

});

或者您可以使用delegate

$("#result").delegate("#click2","click",function(){

// do the ajax here

});

jquery live

jquery delegate

jQuery.post（）里面的jQuery.post（）

4 个答案: