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

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文档返回由我指定的奇怪字符串分隔的页面数。我认为这将是最简单的方法，把页数放在帖子文本的其余部分。

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

我有一个快速跟进的问题，这段代码不工作的一些奇怪的原因。它为下一页和上一页按钮添加了一个事件处理程序，但也添加了错误检查，以确保您没有试图击中page -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方法。它所做的就像分配"点击"(就像你做的)，但它重新评估每个事件的选择器。所以新元素仍然会被包括在内。

我相信"live"方法对第一个问题也会起作用。只需将每个数字用一个唯一的"类"标识的"跨度"包装起来。然后添加如下内容:

$(".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元素，因此行为将是一致的。