0

我在一个页面上有许多链接进行远程调用以更新页面上的内容。一切都完美无缺，所以我决定为具有内容加载的元素添加一个叠加层，这样它就可以为客户提供一些视觉参考，以了解正在发生的事情。

因此，在我想要显示叠加层的每个链接上，我通过我想要叠加层的 div 中传递的数据属性添加一个类。这是一些示例代码。

<div id="content">Old Content</div>
<%= link_to "Update Content", some_path, :class => 'ajax_trigger', :remote => true, 'data-target' => 'content' %>

好的，所以当单击它时，它会运行并使用respond_to 块format.js 加载数据，我在其中替换内容，即，

$("#content").html("<%= escape_javascript(render(:partial => '/shared/content')) %>")

就像我说的那样，一切都很好。好的，所以我有一个全局的 JS（咖啡脚本）来做覆盖，即。

  $(".ajax_trigger").live("ajax:beforeSend", (evt, data, status, xhr) ->

    # Get target div to add overlay
    target = $(this).data('target')
    $t = $("#"+target)

    # Update CSS for Overlay
    $("#overlay").css
      opacity: 0.7
      top: $t.offset().top
      left: $t.offset().left
      width: $t.outerWidth()
      height: $t.outerHeight()

    # Update Image for Overlay
    $("#img-load").css
      top: ($t.height() / 2)
      left: ($t.width() / 2)

    # Show Overlay
    $("#overlay").fadeIn()

  ).live("ajax:success", (evt, data, status, xhr) ->
    $("#overlay").fadeOut()
  ).live "ajax:error", (evt, data, status, xhr) ->
    alert "Failed!"

这适用于页面上的 2 个项目，但对于其中一个项目，它显示覆盖但不隐藏它。我没有收到任何错误，当然 ajax:alert 会给我一个警告。内容在叠加层上完美加载，所以一切都很好。

我看不出有什么不同，为什么即使我得到了很好的回应并替换了内容，它也不会隐藏。

有什么建议可以调试吗？

4

1 回答 1

0

仅从描述中我无法判断您的问题是什么。您是否使用过诸如 Firebug 或 Chrome 开发者工具中的 JavaScript 调试器？找到你的脚本，设置一个断点，点击麻烦的链接，然后单步执行代码。

于 2012-05-08T19:31:44.870 回答