jQuery绑定点击到AJAX调用后的链接

前端之家收集整理的这篇文章主要介绍了jQuery绑定点击到AJAX调用后的链接前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我越来越愤怒 – 也许有人能够帮助我。

我需要在AJAX调用后重新绑定到链接,但由于某种原因,它不想工作。

这是我的代码

  1. if ($('.active').length > 0) {
  2. $('.active').click(function() {
  3. var elem = $(this);
  4. var url = $(this).attr('href');
  5. $.ajax({
  6. url: url,dataType: 'html',success: function(data) {
  7. elem.replaceWith(data);
  8. }
  9. });
  10. $('.active').bind('click'); return false;
  11. });
  12. }

任何想法?

感谢您的回复 – 我修改代码,但问题依然存在:

  1. function makeActive() {
  2. if ($('.active').length > 0) {
  3. $('.active').click(function() {
  4. var elem = $(this);
  5. var url = $(this).attr('href');
  6. $.ajax({
  7. url: url,success: function(data) {
  8. elem.replaceWith(data);
  9. }
  10. });
  11. $('.active').live('click',makeActive);
  12. return false;
  13. });
  14. }
  15. }
  16.  
  17.  
  18. $('.active').live('click',makeActive);

解决方法

如果要在Ajax调用后执行,则必须在成功处理程序中添加重新绑定:
  1. success: function(data) {
  2. elem.replaceWith(data);
  3. $('.active').bind('click',/* some function needs to go here*/);
  4. }

也就是说,在这种情况下,live()delegate()可能是更好的选择[更新:现在jQuery 1.7已经出来,所有事情都可以用.on()]完成。这也将阻止点击处理程序的双重分配,以防止其他.active链接没有被替换

更新:关于你更新的代码:你正在使用的方式失败它的目的。请阅读documentation.您正在做的是在点击链接时分配点击处理程序,这意味着您一遍又一遍地添加点击处理程序。

这是您的代码的改进版本。

  1. $('.active').live('click',function(event) {
  2. var elem = $(this);
  3. var url = $(this).attr('href');
  4. $.ajax({
  5. url: url,success: function(data) {
  6. elem.replaceWith(data);
  7. }
  8. });
  9. event.preventDefault();
  10. event.stopPropagation();
  11. });

猜你在找的jQuery相关文章