【问题标题】:Ajax load more from PHPAjax 从 PHP 加载更多
【发布时间】:2013-06-05 02:06:02
【问题描述】:

更新:

我想制作一个加载更多的ajax按钮,我希望它从一个php文件中加载数据,该文件将从数据库中提取数据。

我设法让它只加载一次,但是当我点击新的更多按钮时它不起作用。

这里是 Javascript:

$(document).ready(function(){
    $(".more").click(function(){
        var ID = $(this).attr("id");
        if(ID) {
            $("#more"+ID).html('<img src="moreajax.gif" />');

            $.ajax({
                type: "POST",
                url: "more.php",
                data: "lastimg="+ ID,
                cache: false,
                success: function(html){
                    $("div#updates").append(html);
                    $("#more"+ID).remove(); // removing old more button
                }
            });
        } else {
            $(".morebox").html('The End');// no results
        }

        return false;
    });
});

还有更多.php

$lastimg = mysql_real_escape_string($_POST['lastimg']);

$result = $mmhclass->db->query("SELECT * FROM `file_storage` WHERE `is_private` = '0' AND `file_id` < '$lastimg' ORDER BY `file_id` DESC LIMIT 10;", array(MYSQL_FILE_STORAGE_TABLE));

while($row=mysql_fetch_array($result))
{
$file_id = $row['file_id'];
$filename = $row['filename'];
?>
    <li>
        <?php echo $filename; ?>
    </li>
<?php
}
?>
<div id="more<?php echo $file_id; ?>" class="morebox">
    <a href="#" class="more" id="<?php echo $file_id; ?>">more</a>
</div>

【问题讨论】:

  • 问一个实际的问题也会有所帮助。目前您只给了我们两个没有特别问题的复制代码示例!
  • @xXx 这些不仅仅是复制的 2 个代码,大部分都是我写的,就像我说它是基于教程一样,这并不意味着我复制了所有内容并来到了 stackoverflow。
  • more.php 是一团糟!!!!!!!!!!!!!!!
  • 好吧,我又努力了,已经更新了。

标签: php jquery ajax


【解决方案1】:

它只工作一次,因为在你的 ajax 完成后,.more 元素将在页面上是新的, 所以你附加到它的click 事件处理程序不再工作了。

您必须使用事件委托:

$('body').on('click', '.more', function () {
    // your code
});
  • 注意:jQuery 1.7+ 必填。

参考资料:

  • .on() - jQuery API 文档

【讨论】:

    【解决方案2】:

    我想你可以使用 jQuery live 函数

    $(".more").live("click", function(){ 
    
    // Code here
    });
    

    【讨论】:

    • live 函数在新 jQuery 中不起作用,已被 on() 取代
    • .live 方法在版本 1.7 中已弃用,并在版本 1.9 中删除。请改用on :)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-07-24
    • 2014-05-12
    • 2023-03-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多