如何将事件和效果应用于通过没有特定id的Ajax请求生成的元素
How do I apply events and effects to elements generated through Ajax request with no specific id?
我正在制作一个论坛,我希望它像桌面应用程序一样运行,所以我不刷新页面。由于没有更好的方法而没有另一个完整的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 + " " + i);
}
oldHtmlTemp = $('#enterpage').html();
$('#enterpage').html(oldHtmlTemp + " ");
}
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时,它都会突出显示,因为会对脚本进行评估。您应该考虑这样使用这个设计模式:
- 将所有代码集中到一个地方
- 此设计模式克服了覆盖dom对象的情况。(例如,旧的HTML有一个#prev按钮,新的HTML也有一个#prev按钮。代码将总是引用最近的dom元素,因此行为将是一致的。
- PHP会话ID变量与AJAX一起返回
- 如何进行AJAX调用,使其仅在我单击包含在特定类中的链接时触发;id”;父元素的
- Javascript尽管ID不同,但只有第一个按钮提交给Ajax表单
- 使 ajax 请求和成功数据显示在 id <选择>选择>部分中
- 在 AJAX 调用中发送 DIV 元素的 ID
- 通过 AJAX 为每个 ID 提交表单
- 如何从 jQuery 中的 ajax 函数中的类访问元素 ID
- 如何传递id列表's在MVC中向服务器发出AJAX请求
- 核心ajax每次都发送具有不同会话id的请求
- 当创建和销毁都是AJAX时,在DOM中找不到ID
- 使用AJAX发送隐藏的ID输入字段
- 如何使用Javascript通过AJAX传递所需的id;PHP
- Jquery Ajax表单提交:多个表单-相同的按钮id's
- 使用ajax的Django jquery.如何让jquery监听id's生成的表单
- 根据单选按钮id属性调用ajax jquery
- 设置一个按钮按下函数来触发一个Id为的Ajax调用
- AJAX添加多个事件插入前重置Id
- 如何将inputtextbox的值及其id传递给javascript函数,使其通过ajax进行post请求
- 特定的id没有传递给ajax
- Ajax:如何获取具有动态生成ID的元素的值