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

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.