javascript - Rails 应用程序中单击时模态窗口出现两次

Question

我在 http://autozeep.com/cars 有这个网络应用程序

每辆车都有一个链接，可以将这辆车的详细信息发送到您 friend 或您的电子邮件中。单击“发送 friend ”，您将看到模式窗口出现。问题是，模态加载了两次，当我点击链接时，我有 2 个窗口，一个在另一个窗口之上，我仍然可以填写表格并将其发送到邮件，此后页面将刷新到汽车列表，仅此而已好的，但如果我不想将报价发送到邮件，而我只是关闭窗口，您会看到还有一个窗口需要关闭，这是为什么呢？请帮忙。

这是打开模式窗口的链接的样子:

<%= link_to image_tag('sendtofriend.png'), send_to_friend_car_path(car),  :remote => true, :class=> 'send_to_friend' %>

和application.js

// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults



$(document).ready(function() {
  $('.find_on_map').click(function(e) {
    var url = $(this).attr('href');
    var dialog_form = $('<div id="dialog-form">Loading form...</div>').dialog({
      autoOpen: false,
      width: 600,
      modal: true,
      open: function() {
        return $(this).load(url + ' #content');
      }
    });
    dialog_form.dialog('open');
    e.preventDefault();
  });
});

$(document).ready(function() {
  $('.setmain').click(function(e) {
    var url = $(this).attr('href');
    var dialog_form = $('<div id="dialog-form">Loading form...</div>').dialog({
      autoOpen: false,
      width: 600,
      modal: true,
      open: function() {
        return $(this).load(url + ' #content');
      }
    });
    dialog_form.dialog('open');
    e.preventDefault();
  });
});

$(document).ready(function() {
  $('.send_to_friend').click(function(e) {
    var url = $(this).attr('href');
    var dialog_form = $('<div id="dialog-form">Loading form...</div>').dialog({
      autoOpen: false,
      width: 400,
      modal: true,
      open: function() {
        return $(this).load(url + ' #content');
      }
    });
    dialog_form.dialog('open');
    e.preventDefault();
  });
});

$(document).ready(function() {
  $('.request_more_details').click(function(e) {
    var url = $(this).attr('href');
    var dialog_form = $('<div id="dialog-form">Loading form...</div>').dialog({
      autoOpen: false,
      width: 400,
      modal: true,
      open: function() {
        return $(this).load(url + ' #content');
      }
    });
    dialog_form.dialog('open');
    e.preventDefault();
  });
});

$(document).ready(function() {
  $('.make_offer').click(function(e) {
    var url = $(this).attr('href');
    var dialog_form = $('<div id="dialog-form">Loading form...</div>').dialog({
      autoOpen: false,
      width: 400,
      modal: true,
      open: function() {
        return $(this).load(url + ' #content');
      }
    });
    dialog_form.dialog('open');
    e.preventDefault();
  });
});

已修复

我更改了<%= javascript_include_tag :defaults %>与 <%= javascript_include_tag :all %>

Answer 1

很可能，您有两个 JavaScript 响应同一次点击。

如果您在页面上查看源代码，您可以看到

<script src="/javascripts/application.js?1324469597" type="text/javascript"></script>
<script src="/javascripts/rails.js?1312451872" type="text/javascript"></script>
<script src="/javascripts/application.js?1324469597" type="text/javascript"></script>

Application.js 被包含两次。这可能不是导致问题的确切 js 文件，但更有可能的是，如果您尝试并从站点中删除 JavaScript，您将拥有相同的功能，而不会出现重复的响应。