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

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"} ×
  %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上面都添加了另一组事件侦听器。

---

当前调试状态

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

每当hidden.bs.modal被触发时，我都尝试过执行与$(this).removeEventListener(stuff) $(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（）方法 。

这样可以防止父元素在调用模式关闭后触发事件。 可能值得一试。