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

How do I apply events and effects to elements generated through Ajax request with no specific id?

本文关键字:id Ajax 请求 元素 求生 事件 应用于      更新时间:2023-09-26

我正在制作一个论坛,我希望它像桌面应用程序一样运行,所以我不刷新页面。由于没有更好的方法而没有另一个完整的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。

感谢所有浏览/回复这篇文章的人。

我将先提到最后一个问题。我不理解你的后续问题,因为你没有具体说明什么是不工作的。我猜你是覆盖你的"下一个","前",而动态加载新的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元素,因此行为将是一致的。