jquery - 我可以减少网格代码中使用的 JavaScript 数量吗？

Question

我有以下代码，用于在网格中重新加载数据。我担心如果我有这个代码，那么对于每个网格单元格，它将为单击事件等创建大量的单击事件代码。这是一个正确的假设还是 jquery/javascript 对其进行了优化并仅在客户端上存储一次点击事件代码？

如何移动此代码，以便点击事件代码仅出现一次，并且我可以从每个点击事件调用它？

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

            }
        });

并不是要找人重做我的所有代码，但我希望能提供一个示例，以便我可以将其中一个点击功能应用到另一个点击功能。

Answer 1

听起来您需要将点击事件中的所有代码重构为单个函数。

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

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

对删除链接点击事件进行类似的处理。