доступ к именам классов jquery для рекурсивно добавленных полей - PullRequest
Новая
       39

доступ к именам классов jquery для рекурсивно добавленных полей

1 голос
/ 03 ноября 2011

У меня есть форма, которая позволяет пользователю добавлять неограниченное количество дополнительных строк (ввод текстовых полей) по мере необходимости. Я уже успешно использую jQuery для создания этих дополнительных полей. Для примера рассмотрим, что следующее клонируется несколько раз: 

<input name="datain_pline_1" id="datain_pline_1" value="" type="text" class="calc_input" maxlength="4" />
<span id="dataout_currentmult_1"></span>

В каждом новом экземпляре это число увеличивается (поэтому datain_pline_1 становится datain_pline_2, datain_pline_3 и т. Д., И мой выходной диапазон также увеличивается соответственно).

Затем я запускаю AJAX для данных, которые вводятся в каждое поле, и возвращаю некоторый вывод в соответствующем теге span. Мой код (см. Ниже) работает нормально для первого поля (# 1), но я не знаю, как отредактировать его, чтобы применить функцию .change ко всем моим идентификаторам с похожим именем ... и затем, как применить соответствующий номер также на выходе диапазона. Я относительно новичок в jQuery, но, читая об этих вещах, мне кажется, что это не только выполнимо, но и относительно просто ... но, конечно, НЕ просто для меня! Любая помощь с благодарностью! 

$("#datain_pline_1").change(function(){

    //Get the data from the field
    var pline = $('input[name=datain_pline_1]');

    //organize the data
    var data = 'pline=' + pline.val() ;

    //start the ajax
    $.ajax({
        //this is the php file that processes the data and returns values
        url: "ajax_getPlineData.php",
        //GET method is used
        type: "GET",
        //pass the data
        data: data,
        //Do not cache the page
        cache: false,
        //success
        success: function (outputPlineData) {
            if (outputPlineData!='') {
                //success
                $('#dataout_currentmult_1').html(outputPlineData);
            } else {
                alert('Unexpected Error');
            }
        }
    });
    return true;
});

Где мне нужна помощь, это в первых двух строках, применяя это ко всем соответствующим полям ввода текста (и захватывая значение в переменную): 

$("#datain_pline_1").change(function(){
var pline = $('input[name=datain_pline_1]');

и тот, который внизу выводит возвращенные данные: 

$('#dataout_currentmult_1').html(outputPlineData);

Ответы [ 2 ]

2 голосов
/ 03 ноября 2011

Для обработчика change, если все входы имеют один и тот же класс, вы можете использовать делегат или живые функции jquery, которые будут применять событие change ко всем текущим и будущим элементам этого идентификатора. Для диапазона вы можете изменить диапазонid должен быть чем-то похожим на datain_pline_1_SPAN, так что когда происходит событие изменения, вы можете получить текущий идентификатор и диапазон на основе этого идентификатора.Например: 

$(".calc_input").live("change", function(){
    var id = this.id;
     var span = $("#" + id + "_SPAN");
    //do rest of stuff here
});

или 

$(document).delegate(".calc_input", "change", function(){
     var id = this.id;
     var span = $("#" + id + "_SPAN");
     //do rest of stuff here
});
2 голосов
/ 03 ноября 2011

ОК, вам нужен более динамичный доступ к ним: 

// change your spans to have a class
<input name="datain_pline_1" id="datain_pline_1" value="" type="text" class="calc_input" maxlength="4" />
<span id="dataout_currentmult_1" class="calc_output"></span>

Затем измените те две строки, о которых вы говорили, на: 

// target all of the inputs (they all have the class "calc_input")
// updated to "live" per @scrappedcola's comment
$(".calc_input").live('change', function(){

//and
// target the span that is directly after the input that fired the change event
$(this).next('.calc_output').html(outputPlineData);
...