Question

我的Rails 4应用程序中有一个Ajax请求，但是一旦单击该按钮，它就会重新加载整个页面。我该如何防止这种情况发生？页面被缓存，所以我不能简单地添加link_to或button_to。提前谢谢。

listing_collection.js

$(document).ready(function(){

$(".listcollect").on("click", function(){
      var listID = this.id;
        $.ajax({
          method: "GET",
          url: "/listing_collections/:id/listcollect",
          success: function(result) {
            var arrLen = result.length
            var $ul = $("<ul></ul>")
            for (var i = 0; i<arrLen; i++){
                var $li = $("<li></li>");
                var $a = $("<a></a>");
                $a.attr("href", "/listings/" + listID + "/add_to_collection?listing="+listID+"$amp;listing_collection_id="+result[i]["id"]+"&amp;listing_id="+listID)
                $a.text(result[i]["name"])
                $li.append($a)
                $(this).next().append($li)
            }
          }.bind(this)
        })
    });
});

这是按钮：

<div class="btn-group listcollect-wrapper">
    <button class="listcollect button btn-blue-white btn-2x dropdown-toggle" data-toggle='dropdown' type="button" id=<%= listing.id %>>Add to Listing Collection <span class="caret"></span></button>
    <ul class='dropdown-menu'>

    </ul>
  </div>

Answer 1

我的两分钱此类.listcollect的dom是提交类型的按钮，即button type="submit"

您可以使用button type = "button"或使用

event.preventDefault()

$(".listcollect").on("click", function(){
      event.preventDefault()
    // Rest of code

})

Answer 2

这是因为这是锚标记的默认行为。如建议您可以将控件类型更改为类似按钮或覆盖默认行为，如下所示：

$(".listcollect").on("click", function(e){
    e.preventDefault();
});

Answer 3

试试这个：

$(document).ready(function(){

$(".listcollect").on("click", function(e){
      e.preventDefault();
      e.stopPropagation();

      var listID = this.id;
        $.ajax({
          method: "GET",
          url: "/listing_collections/:id/listcollect",
          success: function(result) {
            var arrLen = result.length
            var $ul = $("<ul></ul>")
            for (var i = 0; i<arrLen; i++){
                var $li = $("<li></li>");
                var $a = $("<a></a>");
                $a.attr("href", "/listings/" + listID + "/add_to_collection?listing="+listID+"$amp;listing_collection_id="+result[i]["id"]+"&amp;listing_id="+listID)
                $a.text(result[i]["name"])
                $li.append($a)
                $(this).next().append($li)
            }
          }.bind(this)
        })
    });
});

我添加了e.preventDefault（），它阻止浏览器默认处理点击，e.stopPropagation（）禁止将click事件传播到控件的容器，以防它们也有侦听器。

使用JS无刷新或页面重新加载

3 个答案: