javascript - 如何确定元素是否是动态创建的

Question

我有一个使用 jQuery、Backbone.js 构建的现有系统和一个用 C# 编写的 REST-ish 后端。该应用程序是一个 SPA，需要填写表格并进行导航。我的工作是构建一个“导航拦截器”来连接应用程序，以便系统检测当前 View 中的字段是否被修改，以便用户导航时，会警告他字段被修改并要求保存或取消的变化。

我设计它的方式是使用 jQuery。简而言之，我在 input、select 等上使用选择器，并将更改事件绑定(bind)到它。然后我在链接和按钮上使用选择器，取消绑定(bind)所有单击事件，绑定(bind)我的“拦截器”(如果字段已更改，请在导航之前询问)，然后在拦截器之后重新绑定(bind)所有单击事件。我使用 stopImmediatePropagation() 取消常规导航事件，从而产生一种围绕事件的包装器。

这样做，我有两个问题:

1. 在字段上调用 ​​.val() 不会触发更改事件，这很好，因为我动态填充字段。问题是 Bootstrap 日期选择器似乎没有使用 .val() 设置值，导致所有日期字段在初始化时都具有“已更改”状态。

2. 动态创建的元素(例如:页面加载后创建的 Accordion 面板中的字段)不接受导致表单不触发导航拦截器的更改事件的事件。

我的问题是关于上述两个要素:

1. 有没有办法确定特定字段是否是日期选择器并在该字段上绑定(bind)更改事件，以便当我填充它时，更改事件不会触发，但当用户这样做时，它会触发(我尝试过)绑定(bind)在 changeDate 事件上，但 setDate 方法似乎也在触发 changeDate 事件)？
2. 有没有办法确定元素是否是动态创建的(例如:$(''))？问题是我没有针对单个字段的特定选择器，所以我认为我不能使用委托(delegate) ($(document).on('change', 'someFieldSelectorICannotKnow', function () {});)。我所拥有的只是 jQuery 元素的句柄(.each(fn) 迭代中的 $(this))。

#2 在所有字段上使用事件委托(delegate)并在字段不是表单字段时跳过处理程序来解决

#2 的解决方案:

NavigationInterceptor.prototype.bindChangeEventOnAllEditableFields = function () {
    var self = this;

    var fieldsSelector = $(this.configuration.selectors.formFields.join(', '));
    $(fieldsSelector).each(function () {
        var isFormField = !self.searchClassFromArrayInElement(self.configuration.classes.nonFormFieldClasses, $(this));

        if (isFormField && self.configuration.debug.highlight.fields.unchanged && $(this).attr('type') === 'radio') {
            $(this).parent().css('background-color', self.configuration.debug.highlight.fields.unchanged);
        } else if (isFormField && self.configuration.debug.highlight.fields.unchanged) {
            $(this).css('background-color', self.configuration.debug.highlight.fields.unchanged);
        }
    });

    $(document).on('change', fieldsSelector, function (event) {
        var field = $(event.target);
        var isFormField = !self.searchClassFromArrayInElement(self.configuration.classes.nonFormFieldClasses, field);

        if (isFormField) {
            self.hasFieldChanged = true;

            if (self.configuration.debug.highlight.fields.changed) {
                if (field.attr('type') === 'radio') {
                    field.parent().css('background-color', self.configuration.debug.highlight.fields.changed);
                } else {
                    field.css('background-color', self.configuration.debug.highlight.fields.changed);
                }
            }
        }
    });


    return this;
}

Answer 1

var unchangeable_classes = ['decorative', 'constant'];
$(document).on('change', 'input,select,textarea', function () {
    var $this=$(this); 
    for(var i =0;i<unchangeable_classes.length;++i){
       if($this.hasClass(unchangeable_classes[i]))
           return;
    } 
    global_changed = true;
});

为什么这不起作用，它应该起作用？ (根据评论进行编辑。)