Question

我是Ajax的新手，想知道是否有人能指出我正确的方向。

我有一个Wordpress主题，使用Ajax过滤掉搜索结果。这很好用，直到我引入jQuery toggleslide来隐藏搜索结果中的一些类别（因为有100个类别）。

在我的html中，我点击了一个名为＆＃34; button＆＃34;这揭示了名为＆＃34;结果＆＃34;。

的区域

我已将此代码添加到我的页面标题中，并且toggleslide效果很好，但问题是，当我点击其中一个结果来优化搜索结果时页面重新加载，而不是显示＆＃34;装载＆＃34;登录。

如果我删除了代码，那么＆＃34; loading＆＃34;标志有效，但是toggleslide

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){

  $("#button").on("click",function(){
    $("#results").slideToggle("slow");
  });

});
</script>

我已经调查了这个，人们建议使用preventdefault（）命令，所以我尝试了这个：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){

  $("#button").on("click",function(e){
    $("#results").slideToggle("slow");
  });

e.preventDefault();

});
</script>

再次，toggleslide工作正常，但AJAX没有。

如果有人可以提供帮助，我真的很感激。

由于克里斯

---------更新-----------。

感谢您的回复，不幸的是，以下没有一项工作，我也尝试过：

live("click",function())
click(function())

没有成功。

我明天可以粘贴其他代码，但我不确定这是否相关？原因是，如果我删除上面的代码一切正常，那么上面的代码会导致问题吗？但我是新手，所以感谢你的帮助

干杯克里斯

Answer 1

e.preventDefault()应位于on("click", function(){})

之内

$(document).ready(function(){

  $("#button").on("click",function(e){
    e.preventDefault();
    $("#results").slideToggle("slow");
  });

});

我也注意到你说：

...当我点击其中一个结果时......

如果您同时点击#results，则需要对其进行相同操作：

  $("#results").on("click",function(e){
    e.preventDefault();
    //Do something
  });

Answer 2

$("#button").on("click",function(e){
    $("#results").slideToggle("slow");
    e.preventDefault();
});

在按钮点击事件中包含e.preventDefault（），因为按钮点击之外的范围不可用。

Answer 3

使用以下

$("#button").on("click",function(event){
    $("#results").slideToggle("slow");
    event.preventDefault();
  });

请参阅，EVENT的范围仅限于点击它。之后EVENT没有意义

在引入jQuery toggleslide之后，Ajax无法正常工作

3 个答案: