javascript - 填写现有字段后如何在表单中添加一组输入字段

Question

我正在尝试做一些事情，当您在表单的输入框中输入详细信息时，使用 Ajax 加载信息，然后在下面添加另一行。到目前为止，我所做的是填充第一个输入框，使用ajax获取数据，然后添加新的一行输入框。但是当我在第二行时，它无法正常工作。我的代码是:

 <form role="form" class="container" method="POST" id="form" action="">
    <div class="row" data-line="1">
        <div class="col-md-2">
            <div class="form-group">
                <label for="ticketNo">Ref #</label>
                <input type="text" name="ticketNo" class="form-control" id="ticketNo" ind="1" placeholder="Ref #">
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <label for="amount">Price</label>
                <input type="text" name="amount" class="form-control" id="amount" placeholder="" disabled>
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <label for="agent">Agent</label>
                <input type="text" name="agent" class="form-control" id="agent" placeholder="" disabled>
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <label for="received">Amount Received</label>
                <input type="text" name="received" class="form-control" id="received" placeholder="">
            </div>
        </div>
    </div>
</form>
<script type="text/javascript">
    $(document).ready(function () {
        var rowCntr = 1;
        $("#ticketNo").blur(function () {
            $.ajax({
                url: "payment_ss.php?action=getInfo&p="+$(this).val(),
                success: function (result) {
                    var ar = result.split("|");
                    console.log(rowCntr);
                    $(".row[data-line='"+ rowCntr +"'] #amount").val(ar[0]);
                    $(".row[data-line='"+ rowCntr +"'] #received").val(ar[0]);
                    $(".row[data-line='"+ rowCntr +"'] #agent").val(ar[1]);
                }
            });
        });
        $("#received").bind('keyup', function(e) {
            if (e.which == 13) {
                var app = $('<div class="row"><div class="col-md-2"><div class="form-group"><input type="text" name="ticketNo" class="form-control" id="ticketNo" ind="1" placeholder="Ref #"></div></div><div class="col-md-2"><div class="form-group"><input type="text" name="amount" class="form-control" id="amount" placeholder="" disabled></div></div><div class="col-md-2"><div class="form-group"><input type="text" name="agent" class="form-control" id="agent" placeholder="" disabled></div></div><div class="col-md-2"><div class="form-group"><input type="text" name="received" class="form-control" id="received" placeholder=""></div></div></div>');
                $("#form").append(app);
                app.attr("data-line", rowCntr);
                $("[data-line='"+ rowCntr +"'] #ticketNo").focus();
                rowCntr++;
            }
        });
    });
</script>

Answer 1

尝试

    $("#received").on( 'keyup' , function(e) {
        if (e.which == 13) {
            var app = $('<div class="row"><div class="col-md-2"><div class="form-group"><input type="text" name="ticketNo" class="form-control" id="ticketNo" ind="1" placeholder="Ref #"></div></div><div class="col-md-2"><div class="form-group"><input type="text" name="amount" class="form-control" id="amount" placeholder="" disabled></div></div><div class="col-md-2"><div class="form-group"><input type="text" name="agent" class="form-control" id="agent" placeholder="" disabled></div></div><div class="col-md-2"><div class="form-group"><input type="text" name="received" class="form-control" id="received" placeholder=""></div></div></div>');
            $("#form").append(app);
            app.attr("data-line", rowCntr);
            $("[data-line='"+ rowCntr +"'] #ticketNo").focus();
            rowCntr++;
        }
    });