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

时间:2011-07-28 18:18:22

标签: javascript jquery html ajax event-handling

我正在创建一个论坛,我希望它像桌面应用程序一样运行,所以我不刷新页面。由于缺少更好的方法而没有另一个完整的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 doc将返回由我指定的奇怪字符串分隔的页数。我决定将这些页面的数量放在帖子文本的其余部分中是最简单的方法。

无论如何,我如何为这些个别数字添加事件处理程序?

我有一个快速的后续问题,这段代码不是出于某种奇怪的原因。它为下一页和上一页按钮添加了一个事件处理程序,但也进行了错误检查,以确保您没有尝试点击-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。

感谢所有观看/回答这篇文章的人。

1 个答案:

答案 0 :(得分:0)

我将首先提到最后一个问题。 我没有理解后续问题,因为你没有说明究竟什么不起作用。 我猜你在动态加载新的HTML时会覆盖你的“下一个”,“上一个”。 要解决此问题,请查看"live" jquery method。 它的作用就像分配“click”(就像你做的那样),但它会在每个事件上重新评估选择器。因此,新元素仍将包含在内。

我相信“实时”方法也适用于第一个问题。 只需用一个独特的“类”标识的“跨度”来包装每个数字。并添加如下内容:

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