jQuery事件仅触发一次，即使多次触发也是如此

Question

最初，“发票行”容器中的所有输入字段均被禁用，但第一个除外。 当用户将任何文本输入到属于第一个“发票行”的任何字段中时，我希望启用第二个发票行输入。 当用户在第二张发票行的任何输入字段中插入任​​何文本时，我希望第三张发票行的输入字段处于启用状态。

我设计了一些应该完成此任务的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');
});

Answer 1

许多人都有一个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);
});

FIDDLE

也将其更改为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);
});

Answer 2

尝试使用以下代码：

          // 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();
});