Question

使用带有atahualpa主题的wordpress，我有引用简单javascript的超链接，它将php文件的输出加载到div中。这部分工作正常。

<a href="javascript:loadCategory(19,1);">a link</a>

<script type="text/javascript">
jQuery("#categoryposts").load("http://www.mysite.com/myphp.php?cat="+catid+"&paged="+pagedid+"", "", 
      function(responseText, textStatus, XMLHttpRequest) {
        if(textStatus == 'error') {
            jQuery('#categoryposts').html('<p>There was an error making the AJAX request</p>');
        }
      }
  );
  }
</script>

但是我希望获得加载到div“#categoryposts”中的图像（sliding boxgrid），但这就是我撞墙的地方。我的php输出div与适当的类，但我根本无法从jQuery获得任何悬停响应。我怀疑它与DOM的加载方式有关，但我无法弄明白。例如，当我尝试添加好东西作为回调函数时，如下所示，我看到alert1，但我从未得到alert2，并且悬停功能不起作用。

         function loadCategory(catid,pagedid) {

jQuery("#categoryposts").load("http://www.mysite.com/myphp.php?cat="+catid+"&paged="+pagedid+"", function()
 {  
   alert('alert1');
   jQuery('.boxgrid.caption').hover(function(){ 
       alert('alert2');
       jQuery(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
       }, function(){
        jQuery(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160}); }
  )}, 
      function(responseText, textStatus, XMLHttpRequest) {
        if(textStatus == 'error') {
            jQuery('#categoryposts').html('<p>There was an error making the AJAX request</p>');
        }
      }
  );

 }

我花了一整天的时间试图破解这个，尝试各种各样的事情，但是撞墙了。希望有一个jQuery大师可以伸出援助之手。

编辑：清理代码格式

Answer 1

load（）的回调可能在检索数据之后但在将其附加到DOM之前执行。警报（'alert1'）之后尝试添加如下内容：

alert(jQuery('.boxgrid.caption').length);

那应该告诉你那个集合是否存在。

另一种可能性是使用“live（）”函数，而不是尝试在回调中附加这些事件处理程序。

Answer 2

很可能你的选择器错了。你尝试过像

这样的东西吗？

alert（$（'。boxgrid.caption'）。length）查看它是否返回非零值？

Answer 3

您是否尝试过使用jQuery的'live'方法绑定悬停函数？您可以使用以下内容单独绑定它，而不是在加载回调中绑定悬停：

$(".boxgrid.caption").live('hover', function(){
    //your hover function
});

这允许动态绑定，即使在事后加载元素也是如此。

jQuery回调不适用于加载功能，不检测悬停事件

3 个答案: