在infinitescroll之后点击事件的Jquery无效

I'm using the cakephp framework and the jquery infinitescroll plugin for loading the content dynamically. And each post has a link with an ajax action.

When a load the page there are 5 posts and the ajax links are working fine. But when a load 5 other posts with the infitescroll (ajax) the ajax link is not working.

It looks that the ajax function cannot find the id of the link but I don't find a solution.

 <a href="/questions" onclick="return false"><i class="glyphicon glyphicon-circle-arrow-right" id="581617"></i></a>

<script type="text/javascript">
 $(document).on("click","#581617",function(){
        $.ajax({url: "the_url", 
                    type:'post',
           })   });
    </script>

UPDATE: After making changes based on @ZacharyKniebel's solution, I am trying to write my selector to attach to links by ID using the below, which is not working. Can anyone tell me why?

"a > i.glyphicon.<?php echo $linkId;?>"
douruocai4111
douruocai4111 我在id的开头添加了一封信。我不是javascript专家,所以你能帮我检查一下id是否有效。可以获得更多信息的链接。
5 年多之前 回复
doujia3441
doujia3441 好吧,你的jquery是针对一个id。也许您可以将您的单击处理程序调整到比#581617更宽的范围(顺便说一下,它不是有效的ID,ID需要以字母开头),然后在您的单击处理程序函数中检查目标元素的ID在执行$.ajax之前有效和/或有效
5 年多之前 回复
duandu1049
duandu1049 不,我正在创造独特的id。
5 年多之前 回复
douren2831
douren2831 您是否附加了具有相同ID的多个元素?
5 年多之前 回复

1个回答

It looks like your delegating your handler just for the element with id #581617. Instead, try delegating your handler to more broadly look for your a > i.glyphicon.glyphicon-circle-arrow-right elements:

$(document).on("click","a > i.glyphicon.glyphicon-circle-arrow-right",function(){
    $.ajax({
        url: "the_url", 
        type:'post'
    });   
});

As a side-note, in the above I also removed the trailing comma after type:'post' for sake of IE functionality. Although keeping the trailing comma is technically valid, IE doesn't like it very much.


UPDATE:

With regards to the selector that you are now trying to use, note that you can't have the selector work for all newly loaded links if you are selecting them by ID. There are workarounds that technically could do this, but they're incredible dirty and have awful performance. This is because IDs are unique and binding this handler by ID is like trying to bind to each link individually, instead of binding to all of the links at once. (Technically, since this is a delegated handler, you're not really binding to the links, but you are listening for them).

In short, the selector that I gave you, above, is what you want to use to make your event handler listen for all of them.

doumisha5081
doumisha5081 好的,谢谢你的帮助。
5 年多之前 回复
dsa45664
dsa45664 此外,现在这是一个与原始问题不同的问题。 你应该接受这个答案,因为它解决了你的原始问题,你应该为下一个问题提出一个新问题。
5 年多之前 回复
dongren4099
dongren4099 噢,真可惜。 每个链接都必须执行其他操作,因此我需要找到另一种方法。 但这并不容易,所以你说。 也许它不是那么清楚:假设我用每个链接加载(带有ajax)5个新帖子。 然后还有5个新的javascripts
5 年多之前 回复
dsaf32131
dsaf32131 您要使用的选择器不可行。 我已经更新了我的帖子更多细节。
5 年多之前 回复
dongqu3623
dongqu3623 我尝试了你的建议和它的工作但是......我有更多的链接与同一个类(glyphicon ..)所以当我按下一个链接时,会执行更多操作。 所以我需要在php中添加一个linkId(参见我的帖子的编辑)。 然后链接不再起作用了。
5 年多之前 回复
dook0034
dook0034 谢谢你们的快速回复。 比利时已经晚了,所以明天我就去测试了。
5 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐