如何将事件和效果应用于通过 Ajax 请求生成的没有特定 id 的元素？

Question

我正在制作一个论坛，我希望它像桌面应用程序一样运行，所以我不刷新页面。由于缺乏更好的方法而没有另一个完整的 Ajax 请求，我收到了 Ajax 请求中可用数据的页数。我需要显示这些数据（正如我在 ethoma.com/testhome.php 上所做的那样——我将页面大小设置为 1 进行测试），但我还需要向显示的每个单独数字添加事件处理程序，以触发将发生变化的事件文本的颜色并触发 Ajax 调用以获取指定的页码。对我来说，挑战是可能有 500 页（当然，这样我就无法显示每个页码）。对于那些不想通过我的网站查看代码的人，这里是它的重要部分：

function getPosts() 
            {
                var queryString = "category=" + category + "&page=" + page + "&order=" + order;
                $.ajax(
                {
                    url: 'getposts.php',
                    data: queryString,
                    success: function(data)
                    {
                        var oldHtmlTemp;
                        var dataArray = data.split("%^&$;");
                        numpage = dataArray[0];
                        $('#postcontainer').html(dataArray[1]);
                        $('#enterpage').html('');
                        if (numpage != 0)
                        {
                            for(var i=1;i<=numpage;i++)
                            {
                                oldHtmlTemp = $('#enterpage').html();
                                $('#enterpage').html(oldHtmlTemp + "&emsp;" + i);
                            }
                            oldHtmlTemp = $('#enterpage').html();
                            $('#enterpage').html(oldHtmlTemp + "&emsp;");
                        }
                        else
                        {
                            $('#enterpage').html('No results for this query');
                        }
                    }
                });
            }

如果您想知道 .split() 正在做什么，则 php 文档返回由那个奇怪的字符串分隔的页面数我指定的。我认为这是将页数放入帖子文本其余部分的最简单方法。

无论如何，我如何将事件处理程序添加到这些单独的数字中？

我有一个快速的后续问题，该代码由于某些奇怪的原因而无法工作。它将事件处理程序添加到下一页和上一页按钮，同时还会进行错误检查以确保您不会尝试点击页面 -1。

$("#nextpage").click(function() 
            {
                if (page < numpage -1)
                {
                    page++;
                    getPosts();
                    alert(page);
                }
            });
            $("#prevpage").click(function() 
            {
                if (page >= 1);
                {
                    page--;
                    getPosts();
                    alert(page);
                }
            });

警报用于调试。另外值得注意的是，当 page = 0 时，您将获得第 1 页。我的意思是，我从 0 1 2 开始计数，但用户看到的是 1 2 3。

感谢任何查看/回答此帖子的人。

Answer 1

我先参考最后一个问题。
我不明白后续问题，因为您没有具体说明什么不起作用。
我猜你在动态加载新 HTML 时会覆盖“下一个”、“上一个”。
要解决此问题，请查看 “live”jquery 方法。
它的作用与分配“点击”完全相同（就像您所做的那样），但它会重新评估每个事件的选择器。所以新的元素仍然会被包含在内。

我相信“实时”方法也适用于第一个问题。
只需用由唯一“类”标识的一些“范围”来包装每个数字。并添加如下内容：

$(".pagination-number").live("click",function(){
$(".pagination-number").attr("color:black"); // remove previous click color
$(this).attr("color:red"); // mark currently clicked number
 .... // load the content
})

当我编写动态加载的 HTML 时，我总是将 Javascript 分配给该 HTML。
这样，当新的 HTML 加载时，我会重新评估 JS。

例如 - 我返回的 html 看起来像这样

<div class="highlight"> some content here </div>
<script> $(".highlight").effect("highlight",{},300)</script>

它给我的好处是我将行为分配给数据。 （就像 OOP 中一样）。
我不需要在每次加载 HTML 时重写行为。 （在此示例中突出显示文本）。
每次加载 HTML 时它都会突出显示，因为脚本会被评估。
您应该考虑使用此设计模式，因为它将：

1. 将所有代码集中到一个位置
2. 此设计模式克服了覆盖 dom 对象的情况。 （例如，旧的 HTML 有一个 #prev 按钮，新的 html 也有一个 #prev 按钮。代码将始终引用最新的 dom 元素，因此行为将保持一致。