title: Kendo UI Grid Button Firing Multiple Times
body: <p>Sorry for such a huge amount of code, but wanted to be thorough.. </p>
  
  <p>Grid 1 has a button - Here is it's code:</p>
  
  <pre><code>name: "custom1", text: "View",
  click: function(e) {
    $uid = this.dataItem(this.select()).users_id;
    $(".title h4").filter(":first").css({
       color: "#0070c0",
       "text-decoration": "underline",
       cursor: "pointer"
    });
    var offset = $(".grid-box").offset();
    var newLeft = offset.left+25;
    newLeft = newLeft + "px";
    var newTop = offset.top+80;
    newTop = newTop + "px";
  
    // Get Profile Info
    $.getJSON(
      '/data/get_users_data.php',
      { users_id: $uid })
      .done( function(tempData) {
          $(".echo_users_name").html(tempData.data[0].users_first_name + ' ' + tempData.data[0].users_last_name);
          $("#users_email").html("&lt;a href=\"+tempData.data[0].users_email+\"&gt;"+tempData.data[0].users_email+"&lt;/a&gt;");
          $("#users_mobile_phone").html(tempData.data[0].users_mobile_phone);
  
  
          $('#teamGrid').css("display","none");
          $('.grid-box2').css({
            display: "block",
            position: "absolute",
            top: newTop,
            left: newLeft,
          }); 
          generatePermissionsGrid($uid);
      });
  },
  </code></pre>
  
  <p>Clicking on this button hides the grid that houses it, un-hides (css display = block) a div and generates a new grid.  Here is the Grid (Grid #2) that is GENERATED after the click occurs above:</p>
  
  <pre><code>function generatePermissionsGrid(uid) {
      $uid = "";
      $uid = uid;
      $("#permissionsGrid").kendoGrid({
          columns: [
              {   title: "Access to Application?", 
                  field: "permissions_users_apps_status", 
                  attributes: {
                      style: "text-align: center; font-size: 14px;"
                  },
                  filterable: true,
                  headerAttributes: {
                      style: "font-weight: bold; font-size: 14px; width: 100px;"
                  },
                  template: function(dataItem) {
                      if ( dataItem.permissions_users_apps_status == 0 ) {
                          return "&lt;input type='checkbox' name='permissions_users_apps_status' id='permissions_users_apps_status' value='1' /&gt;"
                      } else if ( dataItem.permissions_users_apps_status == 1 ) {
                          return "&lt;input type='checkbox' name='permissions_users_apps_status' id='permissions_users_apps_status' value='1' checked /&gt;"
                      }
                  }
              },
              {   title: "Application Name", 
                  field: "apps_title", 
                  attributes: {
                      style: "text-align: center; font-size: 14px;"
                  },
                  filterable: true,
                  headerAttributes: {
                      style: "font-weight: bold; font-size: 14px; width: 100px;"
                  }
              },
              { 
                  command: [
                      {   
                          name: "custom3", text: "Update",
                          click: function() {
                          $pid = this.dataItem(this.select()).permissions_users_apps_id;
                          /*var $row = $(this);
                          var enabled = $row.find('#permissions_users_apps_status').attr('checked');*/
                          // Update App Info
                          alert($uid + ' - ' + $pid);
                          $(".k-grid-custom3").off("click");
                          return;
                          $.post(
                              '/data/update_users_permissions.php',
                              { 
                                  users_id: $uid,
                                  apps_id: $pid 
                              }).done( function(data) {
                                  generatePermissionsGrid($uid);
                              });
                          }
                      }/*,
                      {   
                          name: "custom1", text: "Delete",
                          click: function(e) {
                              $pid = this.dataItem(this.select()).permissions_users_apps_id;
                            // Delete Permissions
                            $confirmed = confirm("Are you certain you would like to delete\nremove access to this application from this user?");
                            if ( $confirmed ) {
                                $.post(
                                  '/data/delete_users_permissions.php',
                                  { 
                                      users_id: uid,
                                      apps_id: $pid
                                  })
                                  .done( function(data) {
                                      //
                                  });
                            }
                          },
                      }*/
                  ],
                  headerAttributes: {
                      style: "width: 80px;"
                  },
                  attributes: {
                      style: "text-align: center;"
                  },
                  title: "&amp;nbsp;"
              }
              ],
          dataSource: {
              transport: {
                  read: {
                      url: "/data/get_users_permissions.php?users_id=" + uid
                  },
                  update: {
                      url: "/data/update_teammate.php",
                      type: "POST"
                  },
                  destroy: {
                      url: "/data/delete_teammember.php",
                      type: "POST"
                  },
                  create:  {
                      url: "",
                      type: "POST"    
                  }
              },
              schema: {
                  data: "data",
                  total: function (result) {
                           result = result.data || result;
                           return result.length;
                 },
                 model: {
                      id: "permissions_users_apps_id"   
                 }
              },
              type: "json" 
          },
          pageable: {
                  refresh: true,
                  pageSize: 5,
                  pageSizes: [
                      5,10,20
                  ]
              },
          sortable: true,
          filterable: true,
          autoSync: true,
          scrollable: false,
          selectable: "row",
          reorderable: false
      }); // END: teamGrid
  
  } // END: generateGrid function
  </code></pre>
  
  <p>Now, if I close this generated grid (hide it using css display = none - and I've tried destroying the grid and clearing the div contents - didn't matter) then I click the button above (the first one) to open this grid again - it fires like the button has been pressed twice.  Then close and reopen this grid again using that same button and it fires 3 times.. etc.. etc.  Goes on forever.</p>
  
  <p>I've tried turning "off" the click binding.. nada.</p>
  
  <p>Anyone have any suggestions??</p>
  
  <p>Thanks again, in advance...</p>