Error with Turbolinks Rails 4 and contextMenu.js

Question

I use Rails 4 and Turbolinks, I use the plugin jquery "contextMenu" for create a little menu, If I reload my app and click on the button, my contextMenu work, but if I navigate in my app and come back on this page and click on my button, the contextMenu doesn't work.

Anyone can help me with my code please ?

 $(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

But if i try with just an alert, that's work.

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

I dont understand what i need to modify for my code coffee work.

Thank's for your help.

Answer 1

A few month passed from last post.

But I had the same issue and I found the solution.

The problem is not only in JavaScript events. The events - it's only half of the problem.

Both solution of events problem specified above is good. I use

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

this approach is much easier and cleaner, in my opinion.

Another part of solution is that you need to unregister existed context menu.

$.contextMenu('destroy', selector );

So code in my case:

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);