Js在Ajax调用后不工作

我在主页上有一个滑块，我试图在使用Ajax单击按钮时加载其中的下五个帖子。当我使用Jquery .post加载下一篇文章的html时，滑块消失了。原因是一个名为'slider.js'的脚本不适用于新添加的html。我尝试使用.live（），但它没有工作，我可以看到从我的控制台Ajax调用的响应，所以我知道临时调用工作。我试图在Ajax响应中包含js文件，但即使如此也不会启动。 js文件是一个包含很多功能的长文件，我不能像论坛上的某些人所建议的那样将它封装在一个函数中。我将如何重新加载slider.js使其工作？这里是ajax .post（）代码。Js在Ajax调用后不工作

$(function() { 

    $('.nextfive').live('click', function() { 

     var data = {action: 'next_five',next: 5}; 

     jQuery.post("<?php echo admin_url('admin-ajax.php'); ?>", data, 

     function(response) { 

      $('#navi').slideDown("slow"); 
      $("#slidercontainer").html(response); 

      },"html"); 

     }); 
});

编辑：检查页面在http://axactsoft.com/samplewp/，点击上面的按钮“点击五”。文件的代码粘贴在这里http://pastebin.com/4iS6Ey10

来源

2012-04-04 Amna Ahmed

您应该从.live（）更改为.on（） – frenchie 2012-04-04 18:50:14

它给我'on不是函数'错误on（）。 – 2012-04-04 19:19:33

.on（）的语法有点不同 – frenchie 2012-04-04 20:04:50

您使用的是什么slider.js？您可以添加一个事件侦听器，以在从您的PHP脚本获取数据后重新初始化滑块。像这样的东西，虽然它会根据滑块的工作方式而有所不同。

$('.nextfive').click(function() { 
    $.get("<?php echo admin_url('admin-ajax.php'); ?>", 
      {action :'next_five', next : 5}, 
      function (resp) { 
       $('#navi').slideDown("slow"); 
       $("#slidercontainer").html(response) 
       $("#slidercontainer").slider(); /* This will change depending on 
               * the library you are using */ 
    }); 
})

此外，一个关于你的编码风格几件事情：

当你得到的数据，如在未来五年的职位和不修改数据，总是使用GET而不是POST。通常，除非您在服务器上修改某些内容，否则始终使用GET，在这种情况下，您使用POST。
jQuery。*可以被$。*替换，参见上面的示例。
将点击处理程序附加到某个元素上的最简单方法是在jQuery中使用$（elem）.click（）函数，请参阅我的示例。

如果您提供更多关于您使用的滑块的详细信息，我可以帮助您获得更具体的代码。

祝你好运！ 4.其他小的简化，你不需要定义var数据，如果你只使用一次，再次看到我的例子。

来源

2012-04-04 20:30:21 akhaku

请访问http://axactsoft.com/samplewp/查看我的网站，然后单击导航链接顶部上方的按钮，其中显示'点击五'。 – 2012-04-05 09:05:40

得到它解决了，我必须reinializethe滑块后添加新的HTML到div。 – 2012-04-05 19:14:01

不错！请记住选择正确的答案作为解决方案:) – akhaku 2012-04-05 23:34:36

尝试这样的：

$('.nextfive').on({ 

    click: function() { 

       var data = {action: 'next_five',next: 5}; 

       $.post("<?php echo admin_url('admin-ajax.php'); ?>", data, 

       function (response) { 

       $('#navi').slideDown("slow"); 
       $("#slidercontainer").html(response); 
       } 
    }  

}, 'body');

必须使用jQuery的1.7或以上使用。对（）函数。很难知道你在做什么而没有看到你正在使用的所有div ID的HTML结构。

我还建议分割你的代码：你有一个事件处理程序，它为ajax保存一个函数，它本身嵌套一个函数来处理ajax回调。我会让事件处理程序处理事件并将参数传递给处理ajax的另一个函数，并让该函数调用一个只处理ajax响应的函数。你应该在同一个范围内使用3个函数，而不是将3个函数嵌套在一起。

来源

2012-04-04 20:14:43 frenchie

请查阅http://axactsoft.com/samplewp/。我正在使用jquery 1.3 – 2012-04-05 09:06:12

切换到jquery 1.7;为什么使用一个真正的旧版本？至少2岁！ – frenchie 2012-04-05 13:02:38

Js在Ajax调用后不工作

回答

相关问题