Question

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

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

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

好的，所以当点击它时会运行并使用respond_to block 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给我一个警告。内容在叠加层上完美加载，所以再一切都很好。

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

有关如何调试此内容的任何建议吗？

Answer 1

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

link_to和remote =＆gt; true + jquery ajax：成功

1 个答案: