Javascript 使用jqueryajax刷新模式内容

我在BS4中将表单加载到模式中，以便将post重新发布到self-in-affect、检查表单输入、重新加载带有错误的模式div，或者重新定向到签出页面时遇到问题

最初从select.php加载表单时，Ajax加载得很好，但在模式中按下select.php中表单上的提交按钮时，我根本没有收到按钮的响应，就好像该按钮已关闭，控制台中没有显示任何内容等

有什么想法吗？我不熟悉使用JQ和Ajax等，但它似乎与其他人在代码中所做的非常接近

    <script>
    $(document).ready(function() {
        $('.view_data').click(function() {
            var eventID = $(this).attr("id");
            $.ajax({
                url: "select.php",
                method: "post",
                data: {
                    eventID: eventID,
                    selectToken: 'true'
                },
                success: function(data) {
                    $('#modal-body').html(data);
                    $('#ticketsModal').modal("show");
                }
            });
        });



        // process the form in select.php shown in the modal
        $('#ticketForm').submit(function(event) {

            // get the form data
            // there are many ways to get this data using jQuery (you can use the class or id also)
            var formData = {
                'maleplaces': $('input[name=maleplaces]').val(),
                'femaleplaces': $('input[name=femaleplaces]').val(),
                'friendplaces': $('input[name=friendplaces]').val(),
                'eventID': $('input[name=eventID]').val(),
                'ticketSubmit': $('input[name=ticketSubmit]').val()
            };


            $.ajax({
                    type: 'POST', 
                    url: 'select.php', 
                    data: formData, 
                    dataType: 'json', 
                    encode: true
                })
                // using the done promise callback

                .done(function(data) {
                    $('#modal-body').html(data);
                    console.log(data);

                    // here we will handle errors and validation messages
                });

            // stop the form from submitting the normal way and refreshing the page
            event.preventDefault();
        });


    });
</script>

main.php页面上的模式代码如下所示：

    <!-- Modal -->
<div class="modal fade" id="ticketsModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Select </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal End-->

以下是select.php中的表单：

            <form id="ticketForm" name="ticketForm" method="post" action="select.php">

                <div class="form-group">
                    <select name="maleplaces" id="maleplaces" class="custom-select">
                        <option value="0" selected>Male Tickets (0)</option>
                        <option value="1">Male Tickets (x1)</option>
                        <option value="2">Male Tickets (x2)</option>
                        <option value="3">Male Tickets (x3)</option>
                        <option value="4">Male Tickets (x4)</option>
                        <option value="5">Male Tickets (x5)</option>
                    </select>
                </div>

                <div class="form-group">
                    <select name="femaleplaces" id="femaleplaces" class="custom-select">
                        <option value="0" selected>Female Tickets (0)</option>
                        <option value="1">Female Tickets (x1)</option>
                        <option value="2">Female Tickets (x2)</option>
                        <option value="3">Female Tickets (x3)</option>
                        <option value="4">Female Tickets (x4)</option>
                        <option value="5">Female Tickets (x5)</option>
                    </select>
                </div>


            <div class="form-group">
                <select name="friendplaces" id="friendplaces" class="custom-select">
                    <option value="0" selected>Double Tickets (0)</option>
                    <option value="1">Saver Tickets (x1)</option>
                    <option value="2">Saver Tickets (x2)</option>
                    <option value="3">Saver Tickets (x3)</option>
                    <option value="4">Saver Tickets (x4)</option>
                    <option value="5">Saver Tickets (x5)</option>
                </select>

                <input name="eventID" type="hidden" id="eventID" value="<?php echo $event['event_id']; ?>" />
                <input name="ticketSubmit" type="hidden" id="ticketSubmit" value="<?php echo $event['event_id']; ?>" />

            </div>
    </div>

    <div class="col-auto my-1">
        <button type="submit" id="ticket_btn" class="btn btn-primary" onclick="return doubleticketFunction()">Continue to payment</button>
    </div>

    </form>

---

由于动态更改ticketForm元素，因此在替换表单时会丢失与提交事件侦听器的绑定。您必须重新绑定事件或使用来侦听事件。在这个例子中，我选择了前者来详细说明

首先使用$'ticketForm.sumbit中使用的函数并命名。您将使用此函数绑定第一个表单以及替换它的所有表单

function ticketFormSubmit(event) {

  // Use jQuery serialize to get the form values.
  var formData = $(this).serialize();

  $.ajax({
    type: 'POST', 
    url: 'select.php', 
    data: formData, 
    dataType: 'json', 
    encode: true
  })
  .done(function(data) {
    $('#modal-body').html(data);
    console.log(data);
  });

  event.preventDefault();
}

在$.ajax调用的succes回调中，选择新添加的表单并向其添加事件侦听器，如下面的示例所示

$('.view_data').click(function()     
  var eventID = $(this).attr("id");
  $.ajax({
    url: "select.php",
    method: "post",
    data: {
      eventID: eventID,
      selectToken: 'true'
    },
    success: function(data) {
      $('#modal-body').html(data);
      $('#ticketsModal').modal("show");

      // Bind new submit event listener
      $('#ticketForm').on('submit', ticketFormSubmit);
    }
  });
});

---

这是显示数据响应的div模态体吗？或者它的模态体？你也可以添加HTML代码吗？你可以这样尝试吗？我知道你可以按图所示进行尝试吗please@GhoSTBG-我添加了BS4标准的模式代码docs@Dilek-modal body是响应select.php响应数据的div的名称和ID。我现在已经包括了模态代码。干杯，谢谢你。我试着实现你的代码，但按钮还是没用。我可能没有正确地添加它，但我对JQuery是一个不熟悉的人。你的新表单也有ticketForm id吗？将下载表单的HTML添加到上面的问题中。别担心，伙计。是的，通过select.php返回main.php上的模态的表单id为ticketForm。我用你向我建议的“我认为”的代码编辑了我的OP，以及如何使用？同样，使用这段代码，select.php提供的模式和Ajaxed内容的初始加载是完美的，当我在模式中尝试select.php的表单上的提交按钮时仍然无效。我已经通过旧的方式对表单进行了测试，效果很好。如果您将表单添加到上面的问题中，这将非常有帮助。解决方案就在那里。嗨，我刚刚从select.php添加了表单。干杯