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