Как использовать jQuery для идентификации события «change» со многими динамическими элементами формы - PullRequest
Новая
       1

Как использовать jQuery для идентификации события «change» со многими динамическими элементами формы

2 голосов
/ 06 марта 2012

У меня есть веб-форма, которая динамически создается с десятками / сотнями текстовых полей элементов формы.

Есть ли способ использовать $().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();

1 Ответ

6 голосов
/ 06 марта 2012 
//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) {
    ...
});
...