Question

我有一个网络表单，我将beforeunload事件绑定到窗口，以检测表单的任何更改，除了我不需要包含的输入。例如，我不需要绑定beforeunload事件的输入。它应该只绑定输入，当导航离开窗口时会影响丢失更改。

这是我目前的绑定：

formChanged = false;
$('#main-form').on('change.form_change', 'input:not(.leave-change-allowed), textarea:not(.leave-change-allowed), select:not(.leave-change-allowed)', function()
{
    if(!formChanged)
    {
        formChanged = true;

        $(window).bind('beforeunload', function()
        {
            if(formChanged)
            {
                return 'Are you sure you want to navigate away from this window, you will lose unsaved changes.';
            }
        });
    }
    else
    {
        $(this).unbind('change.form_change');   
    }
});

正如您所看到的，我已将:not(.leave-change-allowed)包含在选择器中的元素中，用逗号分隔以选择表单元素。虽然，我不想将not()添加到选择器，因为我想要添加到not()的选择器很少，但我需要应用于每个表单输入{{1 }，input和textarea。请注意，这些元素是动态的，因此我使用了select而不是.on()。

如何将.change()函数与动态元素链接起来？所以我保持选择器完整，并传递.not()函数中所有不必要的元素？

Answer 1

检查函数内的类的目标：

formChanged = false;
$('#main-form').on('change.form_change', 'input, textarea, select', function(e) {
    if(! (formChanged || $(e.target).is('.leave-change-allowed')) ) {
        formChanged = true;
        $(window).on('beforeunload', function() {
            if(formChanged) {
                return 'Are you sure you want to navigate away from this window, you will lose unsaved changes.';
            }
        });
    } else {
        $(this).off('change.form_change');   
    }
});

使用.not（）链接.on（）以从对象中删除不需要的元素

1 个答案: