Question

我的代码

我正在使用模态来显示我的一个观点，如下所示：

# lessons/index.haml

%a{href: new_lesson_event_path(lesson), "data-toggle" => "modal", "data-target" => "#myModal"}
  ="Book now"

单击此按钮时，会在用户所在的当前视图的顶部呈现模式。

我的模态最初是在应用程序视图级别定义的：

# layouts/application.haml

#myModal.modal.fade{:tabindex => "-1", style:'margin-top:50px'}
  .modal-dialog.modal-lg
    .modal-content

视图在modal-content内呈现，如下所示：

# events/new.haml

.modal-header
  %button.close{"aria-label" => "Close", "data-dismiss" => "modal", :type => "button"}
    %span{"aria-hidden" => "true"} &times;
  %h4.modal-title
    ="Sign up for #{@lesson.team_name}"
.modal-body
  # my view content
.modal-footer
  %button.btn.btn-default{"data-dismiss" => "modal", :type => "button"} Close

我的问题

这一切都很有效，但每当我关闭模态时，我原来的lessons/index视图中的JavaScript似乎都添加了另一组事件监听器。

当前调试状态

我在slideToggle()上有一个lessons/index事件，每当我关闭模式时都会被触发两次。当我多次打开和关闭模态时，似乎只发射两次......当模态最初在应用程序级别定义时。

每当$(this).off()被触发时，我都会尝试使用多个不同的行来执行与$(this).removeEventListener(stuff)和hidden.bs.modal类似的操作，以清除每次似乎都被抛到顶部的脚本。但没有人工作。

# this event is fired when the modal is closed... Only fires once every time.
$('#myModal').on 'hidden.bs.modal', (e) ->
  console.log('hidden event fired' + JSON.stringify(e, undefined, '\t'))
  $(this).off()
  $("#myModal").off()

如果我将外部模态内容从application.haml移动到lessons/index.haml，则事件侦听器似乎堆叠在一起，并且slideToggle()事件触发的次数似乎是随着我打开和关闭模态的次数越来越多（内部模态内容保留在模态视图中events/new）。

我可以从所有这些中得出结论，事件监听器正在被堆叠，我不确定如何将它们拆开。有什么建议？我可以做更多的测试吗？

Answer 1

一种方法是使用event.stopPropagation() Method。

这会阻止父元素在调用模态关闭后触发它们的事件。值得一试。

jQuery - 在Twitter Bootstrap的模态关闭后触发的两个事件

1 个答案: