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

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

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

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

和您的删除链接点击事件的类似处理。

Answer 2

每当您使用表格时，通常会在每行和/或单元格中重复事件的数量，您应该考虑使用.delegate()（1.7之前）或.on()：{{3 }}

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

这样您只需创建函数并将其附加到一个元素（表格），而不是每个编辑按钮。事件泡沫破灭，所以他们最终会出现在桌面上。

此外，.addClass()可以应用于选择器中的每个元素，因此无需使用.each()

单独迭代它们

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

2 个答案: