jquery - 使用 Turbolinks 时如何绑定(bind)事件？

Question

如果表单的文本区域为空白，我想阻止表单的发布。我正在使用 jQuery 和 Turbolinks。我必须绑定(bind) ajax:beforeSend，但我让它工作:

  $(document).on 'page:load', '.task-form', ->
    $(this).bind 'ajax:beforeSend', ->
      alert "hi"

提交表单时我没有看到任何警告。知道为什么吗？

我正在通过 ajax 远程加载表单。

# tasks/new.js.erb
$('.task-form-wrapper').append('<%= j render("form") %>');
$('#task_name').focus();

Answer 1

$(document).on 'page:load', '.task-form', ->

page:load 事件不会在 .task-form 元素上触发，而是在 document 上触发。您必须将其更改为:

$(document).on 'page:change', ->
  $('.task-form').on 'ajax:beforeSend', ->
    alert 'hi'

我将 page:load 更改为 page:change 否则，只有当第一个页面请求位于带有表单的 View 上时，它才有效。每次加载新页面时都会触发 page:change。