javascript - 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，这样就不需要blur事件来触发下一个输入的激活了。

编辑:

根据评论，也许这就是您想要的？

$('.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);
});

FIDDLE

编辑:

试试这个:

$('.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);
});