title: Can I cut down the amount of javascript used on my grid code?
body: <p>I have the following code that I use to reload data in a grid. I am concerned that if I have this code then for every grid cell it will create a large amount of clicked event code for things like the clicked event. Is this a correct assumption or does jquery / javascript optimize it and just store the click event code once on the client?</p>
  
  <p>How could I move this code so that the click event code appears only once and I have a call to it from each click event?</p>
  
  <pre><code>function reLoad() {
          var accountID = $('#AccountID').val();
          $.ajax({
              url: "/Administration/Menus/Details",
              data: { pk: accountID },
              dataType: 'html',
              cache: false,
              success: function (responseText) {
                  $('#detailData').html(responseText);
                  $(".grid th")
                      .each(function () { $(this).addClass("ui-state-default"); });
                  $(".grid td")
                      .each(function () { $(this).addClass("ui-widget-content"); });
                  $('.editLink')
                      .button({ icons: { primary: "ui-icon-clipboard"} })
                      .removeClass('ui-button-text-icon-primary')
                      .addClass('ui-button-icon-only')
                  $(".editLink").click(function () {
                      linkObj = $(this);
                      var dialogDiv = $('#commonDialog');
                      var viewUrl = linkObj.attr('href');
                      $.get(viewUrl, function (data) {
                          dialogDiv.html(data);
                          var $form = $("#menuForm");
                          $form.unbind();
                          $form.data("validator", null);
                          $.validator.unobtrusive.parse(document);
                          $form.validate($form.data("unobtrusiveValidation").options);
                          dialogDiv.dialog('option', 'title', 'Edit');
                          $(":input[type='text'],:input[type='password'],textarea").wijtextbox();
                          $("#Type").wijdropdown();
                          $("#Status").wijdropdown();
                          $(":input[type='radio']").wijradio();
                          $(":input[type='checkbox']").wijcheckbox();
  
                          dialogDiv.dialog('open');
                          tinyMCE.init();
                      });
                      return false;
                  });
                  $('.deleteLink')
                  .button({ icons: { primary: "ui-icon-trash"} })
                  .removeClass('ui-button-text-icon-primary')
                  .addClass('ui-button-icon-only')
                  .click(function () {
                      linkObj = $(this);
                      var dialogDiv = $('#commonDialog');
                      var viewUrl = linkObj.attr('href');
                      $.get(viewUrl, function (data) {
                          dialogDiv.html(data);
                          dialogDiv.dialog('option', 'title', 'Delete');
                          dialogDiv.dialog('open');
                      });
                      return false;
                  });
  
              }
          });
  </code></pre>
  
  <p>Not looking for somebody to redo all my code but I'd appreciate an example for perhaps one of the click functions that I could then apply to the other.</p>