Question

我有一个包含多个输入，选择和textareas的表单。

on load jQuery查找每个元素，将其data-attr设置为默认值，将on change事件绑定到它并触发更改。

问题是，某些选择正在根据其他输入值重新加载ajax。

是否有一种简单的方法来更改此代码，以处理加载了ajax的元素？它必须设置初始data-attr值，但每个元素只有一次（在它出现在dom之后），与触发更改相同。

这是原始代码：

$main_form.find('input, select, textarea').each(function(){
    $(this).attr('data-empty', 'true').off('change').on('change', function(){
        if ($(this).hasClass('number')) validate_int($(this));
        update_progress($(this));
    }).trigger('change');
});

我知道有类似的东西：

$main_form.on('change', 'input, select, textarea', function(){

});

但是，这会在每次更改时绑定data-attr，它也会无限地触发更改。此外，.off('change')并非如此，我只是习惯使用它。

我不想复制此代码并将其添加到ajax done函数中，因为我正在尝试防止代码重复，这会使维护和调整它比现在更难。或者这是唯一的选择吗？

如果您有任何问题，请发表评论，我会尽快更新答案。

感谢您的帮助。

Answer 1

如果我理解正确，您需要为data-empty属性设置初始值，并为每个已加载的将来加载的表单元素触发一次更改事件。

我建议您对每个change事件发生时必须执行的代码部分使用事件委托：

// This will affect all form element (including those loaded with ajax)
$main_form.on('change', 'input, select, textarea', function(){
    if ($(this).hasClass('number')) validate_int($(this));
    update_progress($(this));
});

创建一个执行值初始赋值的函数：

/**
*  Set initial value and trigger change event
*  @param $elem {jQuery object} The target element
*/
function setInitialValue($elem) {
   $elem.attr('data-empty', 'true').trigger('change');
}

设置初始数据属性并在每次ajax成功回调时触发change事件：

success: function(data) {
   var targetElement = $('select');
   targetElement .append(data);
   setInitialValue(targetElement);
}

最后，您可以为每个初始加载的元素触发更改事件：

$(document).ready(function() {
    $main_form.find('input, select, textarea').each(function(){
        setInitialValue($(this));
    });
});

将更改和其他操作绑定到div中的多个ajax加载元素

1 个答案: