jQuery.post() 内的 jQuery.post()答案

【问题标题】：jQuery.post() inside a jQuery.post()jQuery.post() 内的 jQuery.post()
【发布时间】：2011-10-16 07:10:06
【问题描述】：

想象一个网站，使用 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？

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

/编辑

我想我需要提供更多意见：

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!';
?>

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

【问题讨论】：

您是否在萤火虫中检查了您的 ajax 调用实际上得到了响应？
是的，似乎第二个事件永远不会推送...（click2），它与第一个jQuery帖子一起加载...

标签： jquery html ajax post load

【解决方案1】：

您可以在第一个帖子的成功处理程序中放置另一个帖子：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

完美，就是这样！！！非常感谢！并感谢初始链接 ;-) （达西，你也是对的，但我有点愚蠢，没有立即看到这个......对不起 :)

【解决方案3】：

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

【讨论】：

进一步看你的例子，如果你说你显示的原始文件加载了test，那么你有click1的重复ID的问题click2的问题是在调用 click 时它不存在。

【解决方案4】：

据我了解，您需要将live 与动态添加的元素一起使用，例如

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

//do ajax here

});

或者你可以使用delegate

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

// do the ajax here

});

jquery live

jquery delegate

【讨论】：