Использование события связывания внутри цикла for

Question

У меня есть следующий код для заполнения скрытого поля после изменения или события нажатия клавиши для любого поля формы в каждой строке ввода:

$(".leave_row_0").bind("keydown change", function(e) {
  $(".leave_hidden_0").val("1");
});

$(".leave_row_1").bind("keydown change", function(e) {
  $(".leave_hidden_1").val("1");
});

$(".leave_row_2").bind("keydown change", function(e) {
  $(".leave_hidden_2").val("1");
});

Однако я не буду знать общее количество строк, которыепоявится на странице в любой момент времени, поэтому мне нужно написать это динамически. Я написал цикл for для упрощения вещей, но по какой-то причине код перестает работать, когда я пытаюсь выполнить его следующим образом:

var k = 0;
for (k = 0; k < leave_requests.length; k++) {
  $(".leave_row_" + k).bind("keydown change", function(e) {
    $(".leave_hidden_" + k).val("1");
  });
}

Есть какие-нибудь идеи о дополнительном ингредиенте, который я мог бы упустить?

Вот моя структура HTML:

i = 0;
                    json[2].forEach(function(leave){
                        leave_requests.push(
                            '<div class="row">' +
                                '<div class="col-sm-2 low-padding-right">' +
                                    '<input type="text" value="' + format_date(json[2][i]['leave_date'], 'leave') + '" name="leave_date[]" class="leave_row_' + i + ' form-control" readonly>' +
                                '</div>' + 
                                '<div class="col-sm-1 low-padding">' +
                                    '<select class="leave_row_' + i + ' form-control" name="day_part[]" id="day_part" style="width: 100%;">' +
                                        '<?php foreach($dayparts as $daypart){ ?>' +
                                            '<option value="{{ $daypart->daypart_id }}">{{$daypart->daypart}}</option>' +
                                        '<?php } ?>' +
                                    '</select>' +
                                '</div>' +
                                '<div class="col-sm-1 low-padding">' +
                                    '<select class="leave_row_' + i + ' form-control" name="leave_type[]" id="leave_type" style="width: 100%;">' +
                                        '<?php foreach($leave_types as $leave_type){ ?>' +
                                            '<option value="{{ $leave_type->leave_type_type_id }}">{{ $leave_type->leave_type_type }}</option>' +
                                        '<?php } ?>' +
                                    '</select>' +
                                '</div>' +
                                '<div class="col-sm-4 low-padding">' +
                                    '<input type="text" value="' + filter_null_values(json[2][i]['leave_notes']) + '" name="leave_notes[]" class="leave_row_' + i + ' form-control">' +
                                '</div>' +
                                '<div class="col-sm-1 low-padding">' +                            
                                    '<input type="text" value="' + (json[2][i]['employee_first_name']).charAt(0) + json[2][i]['employee_last_name'] + '" name="last_updated[]" class="leave_row_' + i + ' form-control" readonly>' +
                                '</div>' +
                                '<div class="col-sm-2 low-padding">' +            
                                    '<input type="text" value="' + format_date(json[2][i]['leave_updated_time'], 'updated') + '" name="leave_updated_time[]" class="leave_row_' + i + 'form-control" readonly>' +
                                '</div>' +
                                '<div class="col-sm-1 low-padding">' +
                                    '<select class="form-control" class="leave_row_' + i + ' name="status[]" id="status" style="width: 100%;">' +
                                        '<?php foreach($status_names as $name){ ?>' +
                                            '<option value="' + json[2][i]['status_name'] + '" name="status" class="form-control">' + json[2][i]['status_name'] + '</option>' +
                                        '<?php } ?>' +
                                    '</select>' +
                                '</div>' +
                            '</div>' +
                            '<input type="hidden" value="" name="leave-hidden" class="leave_hidden_' + i + ' form-control" readonly>'                           
                        );

                        i++;
                    });

Answer 1

Используйте общий класс вместо того, чтобы увеличивать число с классом как в случаях, так и в листьях left_row и left_hidden. Нет необходимости использовать цикл, даже если вы можете использовать «эту» проверку Plz ниже. Я не уверен, есть ли у вас скрытое поле, уже присутствующее в DOM, или нет, так как вы создаете left_row, у вас, должно быть, есть leaf_hidden в DOM

$(".leave_row").bind("keydown change", function(e) {
 $(this).siblings('.leave_hidden').val(1);
});

Answer 2

Не волнуйтесь, я вроде как решил это сейчас, используя братьев и сестер и обходя элемент DOM, поэтому ответ Прамуха был частично верным:

json[2].forEach(function(leave){
                        leave_requests.push(
                            '<div class="row">' +
                                '<div class="col-sm-2 low-padding-right">' +
                                    '<input type="text" value="' + format_date(json[2][i]['leave_date'], 'leave') + '" name="leave_date[]" class="leave_row form-control" readonly>' +
                                '</div>' + 
                                '<div class="col-sm-1 low-padding">' +
                                    '<select class="leave_row form-control" name="day_part[]" id="day_part" style="width: 100%;">' +
                                        '<?php foreach($dayparts as $daypart){ ?>' +
                                            '<option value="{{ $daypart->daypart_id }}">{{$daypart->daypart}}</option>' +
                                        '<?php } ?>' +
                                    '</select>' +
                                '</div>' +
                                '<div class="col-sm-1 low-padding">' +
                                    '<select class="leave_row form-control" name="leave_type[]" id="leave_type" style="width: 100%;">' +
                                        '<?php foreach($leave_types as $leave_type){ ?>' +
                                            '<option value="{{ $leave_type->leave_type_type_id }}">{{ $leave_type->leave_type_type }}</option>' +
                                        '<?php } ?>' +
                                    '</select>' +
                                '</div>' +
                                '<div class="col-sm-4 low-padding">' +
                                    '<input type="text" value="' + filter_null_values(json[2][i]['leave_notes']) + '" name="leave_notes[]" class="leave_row form-control">' +
                                '</div>' +
                                '<div class="col-sm-1 low-padding">' +                            
                                    '<input type="text" value="' + (json[2][i]['employee_first_name']).charAt(0) + json[2][i]['employee_last_name'] + '" name="last_updated[]" class="leave_row form-control" readonly>' +
                                '</div>' +
                                '<div class="col-sm-2 low-padding">' +            
                                    '<input type="text" value="' + format_date(json[2][i]['leave_updated_time'], 'updated') + '" name="leave_updated_time[]" class="leave_row form-control" readonly>' +
                                '</div>' +
                                '<div class="col-sm-1 low-padding">' +
                                    '<select class="form-control" class="leave_row" name="status[]" id="status" style="width: 100%;">' +
                                        '<?php foreach($status_names as $name){ ?>' +
                                            '<option value="' + json[2][i]['status_name'] + '" name="status" class="form-control">' + json[2][i]['status_name'] + '</option>' +
                                        '<?php } ?>' +
                                    '</select>' +
                                '</div>' +
                            '</div>' +
                            '<input type="hidden" value="" name="leave-hidden" class="leave_hidden form-control" readonly>'                           
                        );

                        i++;
                    });

$(".leave_row").bind("keydown change", function(e) {
                    $(this).parent().parent().next('.leave_hidden').val(1);
                });

Answer 3

Вы можете выбрать все строки, у которых className начинается с leave_row_, проходить и связывать ваши события для каждой строки. Поскольку скрытые поля и строки будут иметь одинаковый числовой суффикс, разбейте его на части и сделайте все остальное

$("[class^=leave_row_]").each(function(i, elem) {
   $(`.${elem.className}`).bind("keydown change", function(e) {
        $(".leave_hidden_"+e.target.className.split('_')[2]).val("1");
   });
})

Вместо этого используйте bind, который не рекомендуется использовать on, который используется в демонстрационном примере ниже. Просто для демонстрации type = "hidden" это type = "text"

$("[class^=leave_row_]").each(function(i, elem) {
   $(`.${elem.className}`).on("keydown change", function(e) {
        //console.log(e.target.className);
        $(".leave_hidden_"+e.target.className.split('_')[2]).val("1");
   });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" class="leave_row_0"></input>

<input type="text" value="0_hidden" class="leave_hidden_0"></input> 

<input type="text" class="leave_row_1"></input>

<input type="text" value="1_hidden" class="leave_hidden_1"></input>