jQuery点击功能阻止ajax请求答案

【问题标题】：JQuery click function preventing ajax requestjQuery点击功能阻止ajax请求
【发布时间】：2019-09-20 20:15:24
【问题描述】：

我有一个应该发出 AJAX 请求的简单编辑按钮。当您单击此按钮时，我有一个 JQuery 函数，它也应该将窗口向上滚动到表单。

问题是 JQuery 函数有效，但 AJAX 调用从未进行过。我知道函数是问题所在，因为如果我将其注释掉，就会发出 AJAX 请求。

<div class="panel-footer clearfix">
  <%= link_to 'Edit', user_movie_edit_review_path(review.user, review.movie,review), method: :patch, remote: true, class: 'review-edit btn btn-primary btn-xs pull-left' %>
  <div class="col-sm-1"><i class="fa fa-facebook-official fa-2x"></i></div>
  <div class="col-sm-1"><i class="fa fa-twitter-square fa-2x"></i></div>
  <div class="col-sm-1"><i class="fa fa-google-plus fa-2x"></i></div>
</div>

<script>
    $(document).ready(function(){ 
        $(".review-edit").click(function(e){
            $('html, body').animate({scrollTop : 0},500);
            return false;
        });
    });
</script>

【问题讨论】：

return false; 阻止点击链接的默认操作。
我很惊讶我认为这会停止执行 javascript 代码。然而，红宝石也有？怎么样？
它正在停止发送 AJAX 请求的 JavaScript 代码。
Ruby 在服务器上运行。

标签： jquery ruby-on-rails ajax

【解决方案1】：

您可以将所需的函数放在另一个地方，并在需要时调用它。据我了解，该函数尚未绑定到您的元素，因为它还不存在于 DOM 中（当它加载时），所以当文档准备好时，JavaScript 不会找到该元素，只有在特定事件时触发元素的创建。

尝试设置$(document).ready 的函数outside 并将其绑定到另一个事件中的元素，您知道该事件将在之后该元素实际上在DOM 中。

希望这个答案有帮助！

【讨论】：

【解决方案2】：

你尝试过使用 e.preventDefault() 吗？

$(".review-edit").click(function(e){
  e.preventDefault()
  $('html, body').animate({scrollTop : 0},500); 
});

or
$(".review-edit").on("click", function(e) {
  e.preventDefault();
  $('html, body').animate({scrollTop : 0},500);
})

或超出ready()函数...我认为这是最好的解决方案

$(document).ready(function(){...})
$(document).on("click", ".review-edit", function(e) {
  e.preventDefault();
  $('html, body').animate({scrollTop : 0},500);
})

【讨论】：