如何使用 jQuery 识别具有许多动态表单元素的“更改”事件

Question

我有一个使用数十/数百个表单元素文本字段动态构建的网络表单。

有没有办法使用$().change(function(){}); 或其他方法来 (a) 调用 jQuery/Ajax 在后台执行某些操作并 (b) 捕获实际更改的特定表单元素并使用其更改的值？

我可以处理 Ajax 部分。我的 onChange 事件没有成功。

谢谢。

* JS 文件看起来像这样 *

jQuery.support.cors = true; // needed for ajax to work in certain older browsers and versions

$(document).ready(function(){

    $('a[rel^="prettyPhoto"]').prettyPhoto({
        changepicturecallback: function() {
            //alert('have focus');
        }
    });


//find all the form elements in your form,
//then bind an event handler to all of the elements for the `change` event
$('#my-form').find('input, textarea').on('change', function (event) {

    //this now refers to the "changed" element

    var name  = this.name,
        value = this.value,
        id    = this.id,
        dObj  = {};//create object to pass as data parameter to AJAX request

    //set the key as the name of the input, and the value as the value of the input
    dObj[name] = value;

    $.ajax({
        url     : '<url>',
        data    : dObj,//pass the data object
        //success : function (data) { ... },
        success : alert('changed CCC'),
        error   : function (jqXHR, textStatus, errorThrown) { /*don't for get to deal with errors*/ }
    });
});


$('#my-form').on('change', 'input, textarea', function (event) {
    alert('changed AAA');
});



$(document).on('change', '#my-form input, #my-form textarea', function (event) {
    alert('changed BBB');
});



}); // end .ready()

//  window.parent.closePP();

Answer 1

//find all the form elements in your form,
//then bind an event handler to all of the elements for the `change` event
$('#my-form').find('input, textarea').on('change', function (event) {

    //this now refers to the "changed" element

    var name  = this.name,
        value = this.value,
        id    = this.id,
        dObj  = {};//create object to pass as data parameter to AJAX request

    //set the key as the name of the input, and the value as the value of the input
    dObj[name] = value;

    $.ajax({
        url     : '<url>',
        data    : dObj,//pass the data object
        success : function (data) { ... },
        error   : function (jqXHR, textStatus, errorThrown) { /*don't for get to deal with errors*/ }
    });
});

更新

如果您在页面加载后添加元素，那么您可以使用事件委托绑定到将在 DOM 中的元素：

$('#my-form').on('change', 'input, textarea', function (event) {
    ...
});

这假设#my-form在绑定时在DOM中，否则你可以绑定到document：

$(document).on('change', '#my-form input, #my-form textarea', function (event) {
    ...
});