jquery - 将 .on() 与 .not() 链接起来以从对象中删除不需要的元素

Question

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

这是我当前的绑定(bind):

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() 中的选择器可能很少，但我会需要应用于每个表单输入input、textarea和select。请记住，这些元素是动态的，因此我使用了 .on() 而不是 .change()。

如何将 .not() 函数与动态元素链接起来？所以我保持选择器不变，并在 .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');   
    }
});