javascript - 页面不断在 Ruby on Rails 应用程序中使用 AJAX 调用重新加载

Question

我确信这是一个简单的解决方案，但它让我抓狂。我有一个 Ruby on Rails 应用程序，我通过它对 jQuery 按钮单击事件上的 Controller 操作进行简单的 AJAX 调用以提交数据并在成功提交时启动模式弹出窗口。请参阅下面的代码。

<script type="text/javascript">
$('.linkclass').click(function() {
  id = $(this).attr('id');
  event.preventDefault();
  $.ajax({
  url: "/controller_name/action_name/" + id,
  type: "GET",
  success: function (data) { 
      // call my modal pop-up
      $( "#dialog" ).dialog();
  }
  });
});
</script>

与此问题的 View 相关的唯一 HTML 如下(模态 div 和链接 HTML)。同样，当 Javascript 在 View 中时，这工作正常:

<%= link_to "Submit your info", "/controller_name_name/action_name/#{product.id}", :id => product.id, :class => "linkclass" %>

<div id="dialog" title="Basic dialog" style="display:none">
<p>Your data has been successfully submitted!</p>
</div>

当 Javascript 在 View 中并且页面没有重新加载时，这段代码可以正常工作，正如我所希望的那样。但是，当我将这个 Javascript 代码(减去脚本标签)放在一个单独的 Javascript 文件中时，它会在单击链接时刷新页面。一切都提交正常，但页面重新加载/刷新，我不希望它重新加载。当我把它放在一个单独的文件中时，我是否忘记在代码中添加一些额外的东西？单独的 js 文件位于 assets/javascript 文件夹中，并包含在 HTML 中(我在查看源代码中看到它)，所以这不是问题所在。

如有任何建议，我们将不胜感激。

Answer 1

在您绑定(bind)事件处理程序时，DOM 尚未完全加载。在像这样绑定(bind)之前，您必须确保 DOM 已加载:

$(document).ready(function(){
    $('.linkclass').click(function() {
      id = $(this).attr('id');
      event.preventDefault();
      $.ajax({
      url: "/controller_name/action_name/" + id,
      type: "GET",
      success: function (data) { 
          // call my modal pop-up
          $( "#dialog" ).dialog();
      }
      });
    });
});