Question

下面的代码中有两部分。

对于每个表单，序列化表单并将序列化值存储在表单本身的数据属性中。

对于表单内的每个输入元素，附加一个change事件，然后在每次更改时比较表单的序列化值;然后   相应的启用/禁用按钮。

问题是关于第二部分

如何检测“change”事件是否已附加到“input”元素，如果是，则不要再将事件附加到该元素？

module.trackFormChanges = function (formSelector) {
    $(formSelector)
        .each(function () {
            var theForm = $(this);
            theForm.data('serialized', theForm.serialize());
            var id = theForm.prop("id");
            $("button[form='" + id + "']").prop('disabled', true);
            isFormDirty = false;
        })
        .on('change input', function () {
            var theForm = $(this);
            isFormDirty = !(theForm.serialize() == theForm.data('serialized'));
            var id = theForm.prop("id");
            $("button[form='" + id + "']")
                .prop('disabled', !isFormDirty);
        })
}

Answer 1

您可以检查更改事件是否附加到此类元素

var foo = $.data( $('YOUR-SELECTOR-HERE').get(0), 'events' ).change

对于您的情况，我建议您添加一个＆＃39;数据更改＆＃39;属性为输入。在第一次附加事件时使其成立，并在尝试再次附加事件时再次检查此属性。如果此属性为true，请不要再次附加该事件。

Answer 2

我通过重构为@kiranvj建议解决了我的问题

module.trackFormChanges = function (formSelector) {
    $(formSelector)
        .each(function () {
            var theForm = $(this);
            theForm.data('serialized', theForm.serialize());
            var id = theForm.prop("id");
            $("button[form='" + id + "']").prop('disabled', true);
            isFormDirty = false;

            var isEventHandlerAttached = theForm.data('eventattached');
            if (isEventHandlerAttached == undefined || isEventHandlerAttached == false) {
                theForm.data('eventattached', true);
                theForm.on('change input', function () {
                    var theForm = $(this);
                    isFormDirty = !(theForm.serialize() == theForm.data('serialized'));
                    var id = theForm.prop("id");
                    $("button[form='" + id + "']")
                        .prop('disabled', !isFormDirty);
                })
            }                
        })            
}

jQuery - 如果已经存在，则将更改事件附加到输入elemnt

2 个答案: