javascript - 之前的 Jquery 事件设置了未定义的值

Question

我试图通过获取未定义的响应来在单击事件上发布具有动态设置值的表单这是我的代码。

$( ".paymentselect" ).click(function() {
    var bookingid=$(this).data('id');
    $('#paymentstats').css('display','block');
    $('#paymentform').attr('action', document.location.origin +"/accounts/" + bookingid);

});

$('#paymentform').submit(function(event){
        event.preventDefault();

        var data=$('#paymentform').serialize();
        $.ajax({
            url: $(this).attr('action'),
            method: 'POST',
            data: data,
            beforeSend: function() {
                            // setting a timeout
                        $('#wait').html('<i class="material-icons">cached</i>');
                        },
            success: function(data){
                        if(data.status){
                            $('#paymentstats').css('display','none');
                            alert("UPDATED");
                            //location.reload();
                        }else
                        {
                            alert("something went wrong");
                        }
                        }
        });
});

在 POST 上，bookingid 未定义。 将给予一点帮助

已编辑:

<table>
<tr>
    <td>
        <button class="paymentselect" data-id="NH7003687415654"> Update</button>
    </td>
</tr>
<table>

<div id="paymentstats" class="custom-modal">

<!-- Modal content-->
<div class="modal-content">
        <div class="card" style="margin-bottom:0px">
                <form id="paymentform" method="POST"> //form that will be posted
                    <div class="body">
                      <div class="row">
                        <div class="col-sm-6">
                          <div class="form-group">
                                <div class="form-line">
                                    <input type="text" class="form-control" id="utr" name="utr" placeholder="" required>
                                    <input type="hidden" class="form-control" id="bookingpaymentid" name="id" placeholder="">
                                </div>
                                <label class="small-label" for="utr">Payment UTR(if any)</label>
                          </div>
                        </div>
                        <div class="col-sm-6">
                          <div class="form-group">
                                <div class="form-line">
                                    <input type="text" class="form-control" id="ref" name="ref" placeholder="" required>
                                </div>
                                <label class="small-label" for="ref">Payment Ref</label>
                          </div>
                        </div>
                      </div>
                    </div>  
                    <div class="modal-footer">
                    <div class="spin" id="wait"></div>
                        <button type="submit" class="btn btn-raised bg-pink waves-effect">Submit</button>
                        <button type="button" class="btn btn-raised bg-red waves-effect" id="close-btn">Close</button>
                    </div>
                </form> 
        </div>

</div>

根据要求上面是我的html代码根据要求。 我已经尝试过在点击事件上设置booking paymentid Val，但当表单在服务器上发布时，它也显示未定义。

我刚刚发现当我发布表单时，值变得不确定。任何建议

Answer 1

因为您在 $( ". paymentselect").click(function() { 内声明了 bookingid 。 你可以试试这个:

var bookingid = null;
$( ".paymentselect" ).click(function() {
    bookingid=$(this).data('id');
    $('#paymentstats').css('display','block');
    $('#paymentform').attr('action', document.location.origin +"/accounts/" + bookingid);
});