Событие JQuery срабатывает только один раз, даже если оно срабатывает несколько раз

Question

Событие JQuery срабатывает только один раз, даже если оно срабатывает несколько раз

Изначально все поля ввода в контейнерах "строка счета" отключены , кроме первого. Когда пользователь вводит любой текст в любое из полей, принадлежащих первой "строке счета", я хотел бы, чтобы второй ввод строки счета был включен. Когда пользователь вставляет любой текст в любое из полей ввода второй строки счета, я хотел бы, чтобы поля ввода третьей строки счета были включены.

Я разработал некоторые jquery, которые должны работать для выполнения это, и он делает, но только для первой строки счета-фактуры. Другими словами, как только событие срабатывает один раз, оно никогда не срабатывает снова. Если бы это было так, моя проблема была бы решена, так как мой код, кажется, работает правильно, но только "onChange" первого элемента строки счета.

Я пытался решить эту проблему в течение долгого времени, я был бы очень признателен за любую помощь в этом.

Разметка:

<?php for($i=0; $i < 20; $i++){

    echo '

    <div class="invoice-line">

        <div class="prod-id-cell"><input type="text" class="prod-id-input"></div>

        <div class="prod-name-cell">

            <input onKeyPress="search(this.value)" type="text" class="prod-name-input"/>

            <div class="smart-suggestions">

                    <!-- RESULT SUGGESTIONS WILL POPULATE HERE -->

            </div>

        </div>

        <div class="price-cell"><input class="price-input" type="text" /></div>

        <div class="unit-price-cell"><input class="unit-price-input" type="text" /></div>

        <div class="num-kits-cell"><input class="num-kits-input" type="text" /></div>

        <div class="amount-cell"><input class="amount-input" type="text" /></div>

    </div>';

}

?>

JQuery:

//regulate what lines are enabled / disabled

$('.invoice-line div input').attr('disabled','disabled');

$('.invoice-line:first div input').removeAttr('disabled');



$('.invoice-line div input').change(function(){

    $(this).parent().parent('.invoice-line').next().find('input').removeAttr('disabled');

});

492 2

jQuery javascript

2 ответов:

Comments

Ничего не найдено.

adeneo · Accepted Answer · 2012-12-08 19:15:38

Существует один parent() ко многим, нацеливаясь на оболочку invoice-line, а затем находя next() invoice-line , и то, что вы, вероятно, ищете, на самом деле следующий div, а затем содержащий вход и т. д.:
$('.invoice-line input').not(':first').prop('disabled',true)
                        .end().on('keyup', function() {
    $(this).closest('div').next().find('input').prop('disabled', false);
});
Скрипка

Также изменил его на keyup, чтобы не нужно было событие размытия, чтобы вызвать активацию следующего входа.

Редактировать:

Согласно комментариям, возможно, это то, что вы ищете ?
$('.invoice-line').not(':first').find('input').prop('disabled',true);

$('input', '.invoice-line').on('keyup', function() {
    $(this).closest('.invoice-line').next('.invoice-line').find('input').prop('disabled', false);
});
Скрипка

Редактировать:

Попробуйте вот это:
$('.invoice-line').not(':first').find('input').prop('disabled',true);

$(document).on('keyup', '.invoice-line input', function() {
    $(this).closest('.invoice-line').next('.invoice-line').find('input').prop('disabled', false);
});

Jai · Accepted Answer · 2012-12-08 19:42:57

Попробуйте использовать следующий код:

          // first all the inputs in the .invoice-line get disabled
$('.invoice-line input[type="text"]').attr("disabled","disabled");
         // then the first of all in this becomes enabled 
$('.invoice-line input[type="text"]:first').removeAttr('disabled');

         // then on change next input will be enabled for inputing the values
$('.invoice-line input[type="text"]').change(function(){
    $(this).parent().next().find('input').removeAttr('disabled').focus();
});