从AJAX加载页面中的另一页面加载div

Question

我正在使用jQuery地址来启用从其他页面加载特定内容并更改地址栏中的URL。

我正在一个类似社交网络的网站上工作，因此我正在通过PHP读取MySQL数据库的posts表的ID。 我想利用jQuery和AJAX的可能性来动态读取所有内容。

我发现，我必须使用live() （事实证明是旧的）， delegate() （在1.7.1中也证实是旧的）或on() （事实证明是最好的可能性）通过jQuery + AJAX使事件在动态加载的内容中起作用）。

我还在某处读到，我不能使用load()或get()从已经加载的内容中的另一个页面加载新内容，因为它不会“冒泡”（我什至不知道那意味着什么） ）。

要在AJAX加载页面中加载新内容，我该怎么做？

这是我尝试使用的代码段（包含在加载的页面中）：

<?php 
    if(exist('`posts`')) {
        $load = mysql_query('SELECT `id` FROM `posts` ORDER BY `id` DESC LIMIT 10');
        while($row = mysql_fetch_object($load)) {
?>
            <script type="text/javascript">
                $('body').on('body', 'load', function() {
                    $.get('getpost.php', { pid: <?= $row->id ?> }, function (data) {
                        $('#posts').html($('#post_<?= $row->id ?>', data).html()).show();
                    });
                    $('#posts').off('load');
                });
            </script>
<?php
        }
    }
    else {
?>
    <div align="center">No posts yet.</div>
<?php
    }
?>

getpost.php是我的文件，从该文件中可以获取div_$row->id以便它出现在起始页上。

PLUS（仅供您添加），我希望内容加载时没有鼠标悬停，单击或模糊事件。

谢谢。

Answer 1

如果要将特定的事件映射动态地应用于与其选择器匹配的任何新DOM元素，则要使用“ .live（）”。 或者，您可以将行为附加到加载的每个内容块上。

独立于数据库查找来编写和开发ajax负载，使事情变得更简单。 以下代码段在每个元素加载后触发另一个ajax调用。

<?php
$id = 'div'.mt_rand();
$counter = isset($_REQUEST['counter']) ? $_REQUEST['counter'] : 0;
$next = $counter + 1;
echo <<<END
<div id="{$id}">{$counter}
<script>
$(function() {
   $.ajax('/url?counter={$next}', function(html) {
       $(html).appendTo($('#{$id}').parent()); // or whatever your favorite method is for adding a sibling
   });
});
</script>
</div>
END;
?>

Answer 2

我是唯一认为这种方法完全错误的人吗？ 您为每个帖子都提出了一个ajax请求，这可能最终导致提出过多的请求，从而大大降低了加载时间。 我看不出您不想直接在PHP while循环内编写帖子的HTML的任何原因。