Question

我确信这是一个简单的解决方案，但它让我发疯。我有一个Ruby on Rails应用程序，我在jQuery按钮单击事件上对控制器操作进行简单的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>

此问题的视图中唯一相关的HTML如下（模态div和链接HTML）。同样，当Javascript在视图中时，这可以正常工作：

<%= 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在视图中并且页面没有重新加载时，此代码可以正常工作。但是，当我将此Javascript代码（减去脚本标记）放在单独的Javascript文件中时，它会在单击链接时刷新页面。一切都提交正常，但页面重新加载/刷新，我不希望它重新加载。当我把它放在一个单独的文件中时，我忘了在代码中添加额外的东西吗？单独的js文件位于assets / javascript文件夹中，并包含在HTML中（我在视图源中看到它），所以这不是问题。

任何建议都将受到赞赏。

Answer 1

绑定事件处理程序时，DOM尚未完全加载。在绑定之前，您必须确保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();
      }
      });
    });
});

Page继续使用Ruby on Rails应用程序中的AJAX调用重新加载

1 个答案: