Can I cut down the amount of javascript used on my grid code?

Question

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?

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?

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

            }
        });

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.

Answer 1

Anytime you are working with a table, where the number of events are usually repeated across each row and/or cell, you should consider using .delegate() (pre 1.7) or .on(): http://api.jquery.com/on/

$('#table').on('click', '.editlink', function() {
    linkObj = $(this);
    ....
});

This way you only create and attach the function to one element (the table), instead of every edit button. Events bubble up, so they will eventually hit the table.

Also, .addClass() can be applied to every element in your selector, so there is no need to iterate through them individually with .each()

Answer 2

Sounds like you need to refactor all that code from your click event into a single function.

...
$(".editLink").click(function () {
    handleClick(this);
    return false;
});
...

function handleClick(link){
    linkObj = $(link);
    //the rest of your click event code goes here.
    ...
}

and similar treatment for your delete link click event.