不使用 JS 刷新或页面重新加载答案

【问题标题】：No refresh or page reload using JS不使用 JS 刷新或页面重新加载
【发布时间】：2016-11-26 12:30:45
【问题描述】：

我的 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>

【问题讨论】：

您是否使用button_to 助手创建了那个按钮？
我没有。这是一个缓存页面，所以一个简单的 button_to 或 link_to 不起作用......或者我被引导相信。

标签： javascript jquery ruby-on-rails ajax

【解决方案1】：

试试这个：

$(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() 以禁用单击事件向控件容器的传播，以防它们也具有侦听器。

【讨论】：

这对我不起作用。下拉菜单不再起作用。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

event.preventDefault()

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

})

【讨论】：

我已经有了按钮类型的按钮。我也尝试添加 preventDefault 但没有奏效。
所以我将按钮更改为提交并添加了preventDefault，它仍然重新加载整个页面。