Turbolinks Rails 4 和 contextMenu.js 出错

Question

我使用 Rails 4 和 Turbolinks，我使用插件 jquery“contextMenu”来创建一个小菜单，如果我重新加载我的应用程序并单击按钮，我的 contextMenu 工作，但如果我在我的应用程序中导航并返回此页面并单击我的按钮，contextMenu 不起作用。

有人可以帮我写代码吗？

 $(document).on "page:change", ->
  # uncheck tous les checkbox
  uncheckAllBox = ->
    $("#table_sounds :checkbox").each ->
      $("#sound_id").prop "checked", false
      @checked = false
      return
    $("#delete_sounds").css "display", "none"
    count_checkbox_true == 0
    return

  # check tous les checkbox
  checkAllBox = ->
    $("#table_sounds :checkbox").each ->
      $("#sound_id").prop "checked", true
      @checked = true
    $("#delete_sounds").css "display", "inline"  
    count_checkbox_true = count_checkbox_max
    return

  # Check le checkbox du table en fonction de la progression des sons
  checkType = (type) ->
    uncheckAllBox()
    $("#table_sounds tr").each ->

      # Check les checkbox qui ne sont pas encore checked et qui sont du type selectionner
      if type is $(this).attr("class")
        $(this).find(":checkbox").each ->
          @checked = true
          count_checkbox_true++
          return
      return
    return


  # Les différent test pour rendre visible l'image de la corbeille et check la checkbox du th
  count_checkbox_true = 0
  count_checkbox_max = 0


  if $("#table_sounds").length > 0

    ########################### BUG ON THIS PART ########################
    $(document).on "click", "#table_sounds #button_select", ->
      $.contextMenu
        selector: "#button_select"
        trigger: "left"
        callback: (key, options) ->
          m = "clicked: " + key
          window.console and console.log(m) or alert(m)
          return

        items:
          all:
            name: "Tout"
            callback: (key, options) ->
              checkAllBox()
              return

          none:
            name: "Aucun"
            callback: (key, options) ->
              uncheckAllBox()
              return

          success:
            name: "Finie"
            callback: (key, options) ->
              checkType "success"
              return

          error:
            name: "Erreur"
            callback: (key, options) ->
              checkType "error"
              return

          in_progress:
            name: "En cours"
            callback: (key, options) ->
              checkType "info"
              return
###################### END OF BUG PART ###########################
    $ ->
      $("#table_sounds :checkbox").each ->
        count_checkbox_max++
        if @checked
          count_checkbox_true++
          $("#delete_sounds").css "display", "inline"  
        return

      count_checkbox_max--
      document.getElementById("delete_system").style.display = "none"  if count_checkbox_max is 0
      count_checkbox_true = count_checkbox_max  if count_checkbox_true > count_checkbox_max
      return

    $(".checkbox_sounds").click ->
      if @checked
        count_checkbox_true++
        $("#delete_sounds").css "display", "inline" 

      else
        count_checkbox_true--
        $("#delete_sounds").css "display", "none"  

      if count_checkbox_true is count_checkbox_max
        $("#sound_id").prop "checked", true 
      else
        if count_checkbox_true > 0
          $("#delete_sounds").css "display", "inline" 
        $("#sound_id").prop "checked", false 
      return

    $("#sound_id").click ->
      if @checked
        checkAllBox()
      else
        uncheckAllBox()
      return
  return

但是，如果我尝试只发出警报，那就行了。

$(document).on "click", "#table_sounds #button_select", ->
  alert("that's work)

我不明白我的代码咖啡工作需要修改什么。

感谢您的帮助。

Answer 1

距离上一篇文章已经过去了几个月。

但我遇到了同样的问题，我找到了解决方案。

问题不仅在于 JavaScript 事件。 事件 - 这只是问题的一半。

上面指定的事件问题的两种解决方案都很好。 我用

$(document).on('page:load', initContextMenus);

在我看来，这种方法更简单、更简洁。

解决方案的另一部分是您需要取消注册现有的上下文菜单。

$.contextMenu('destroy', selector );

所以代码在我的例子中：

function initContextMenus() {
  $.contextMenu('destroy', "#taxonomies a" );

  $.contextMenu({
    selector: '#taxonomies a', items: {
      "new": {
        name: 'New',
        callback: function(key, options) {
          window.location.href = this.data('new-url');
        }
      },
      "edit": {
        name: 'Edit',
        callback: function(key, options) {
          window.location.href = this.data('edit-url');
        }
      },
      "delete": {
        name: 'Delete',
        callback: function(key, options) {
          deleteRequest(this.data('delete-url'), 'Are You sure?', this)
        }
      }
    }
  }
)}


$(document).ready(initContextMenus);
$(document).on('page:load', initContextMenus);