Question

我想使用发送按钮在bootstrap模式中提交表单并将响应返回到模态，然后如果用户单击刷新，它应该将模态返回到先前的状态，现在这是有效但问题是在返回上一个状态后，SEND按钮不会再次触发...

这是代码

    <!-- the code that represents the modal dialog -->


  <button data-toggle="modal" data-target="#one_time_sms">LAUNCH SMS MODAL</button>

<div class="modal fade" id="one_time_sms" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" align="left">
<br><br>
    <div class="modal-dialog"  role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Send SMS</h4>
            </div>
                <div class="modal-body">
                <b>Available Unit for SMS</b> (converted from your credit) - <span style="background:green; color:white; border-radius:3px; padding:3px;">85.2</span><br><br>

                    <form id="contact_form" action="http://localhost/..." method="POST">



                      <label>Type phone no(s) below  </label><br>
                      <textarea style="width: 100%; height: 100px;" name="phone_nos" placeholder="your phone nos here, separate with commas if more than one" required></textarea>
                      <br><br>

                      <label>Type your message below</label><br>
                      <textarea style="width: 100%; height: 120px;" name="message" placeholder="your message here" required></textarea>

                      <br><br>

                      <input type="hidden" name="group_id" value="">

                      <div class="row">

                            <div class="col-sm-3"><label>Sender's Identity</label></div>
                            <div class="col-sm-9">

                            <input name="sender_id" type="text" maxlength="11" placeholder="your Sender id here" value="" required>

                            </div>

                      </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" id="submitForm" class="btn btn-default">Send</button>
                    <button type="button" id="refreshForm" class="btn btn-default">Refresh Form</button>
                </div>
            </div>
        </div>
    </div>




<script>

var initial_dialog_html =  document.getElementById('one_time_sms').innerHTML;


    $(document).ready(function () {
        $("#contact_form").on("submit", function(e) {
          $("#submitForm").remove();
            $('#one_time_sms .modal-header .modal-title').html("Message Sending Processing");
             $('#one_time_sms .modal-body').html('<br><center>Please wait, we are processing your request....</center></br>');
            var postData = $(this).serializeArray();
            var formURL = $(this).attr("action");
            $.ajax({
                url: formURL,
                type: "POST",
                data: postData,
                success: function(data, textStatus, jqXHR) {
                    $('#one_time_sms .modal-header .modal-title').html("Message Status");
                    $('#one_time_sms .modal-body').html(data);

                },
                error: function(jqXHR, status, error) {
                    console.log(status + ": " + error);
                }
            });
            e.preventDefault();
        });

        $("#submitForm").on('click', function () {
            $("#contact_form").submit();
        });


        $("#refreshForm").on('click', function () {
            console.log(initial_dialog_html);
            $('#one_time_sms').html(initial_dialog_html);
            //location.reload();
        });


    });

</script>

Answer 1

我猜这种情况正在发生，因为一旦提交表单，HTML就会被修改。在ajax帖子success处理程序中，您有以下行：

$('#one_time_sms .modal-body').html(data);

删除所有先前创建的DOM元素并创建新元素。所以以前绑定的event侦听器不起作用。因此，$("#submitForm").on('click', function() {和$("#refreshForm").on('click', function() {中的代码下次无法使用。所以要避免它;你需要采用event delegation技术，如下所示：

    $(document).on('click',"#submitForm", function() {
      $("#contact_form").submit();
    });

    $(document).on('click',"#refreshForm", function() {
      console.log(initial_dialog_html);
      $('#one_time_sms').html(initial_dialog_html);
      //location.reload();
    });

修改submit处理程序，如下所示：

$(document).on("submit","#contact_form", function(e) {
    e.preventDefault(); //avoid submitting the form the usual way
    //your existing code
    $("#submitForm").remove();

Answer 2

如果你想留在同一页面上，请避免＆＃39;任何重新加载或解除现有模式的行为都不会删除您提交的＃34;提交＆＃34;首先实施。

我建议使用＆＃34;按钮＆＃34;点击事件绑定而不是触发＆＃34;提交＆＃34;事件和使用＆＃39;行动＆＃39;无论如何都使用ajax通信。

那么，下一步是什么？

删除以下内容，因为我发现它不会给您带来任何好处。

 $("#submitForm").on('click', function () {
   $("#contact_form").submit();
 });

添加此项，这不会解除您现有的已打开模式，因为它不是表单提交而您没有使用数据解除=＆＃34;模态＆＃34;保持同样的模态非常好。

 $("#submitForm").on("click", function(e) {
      $("#submitForm").remove();
      $('#one_time_sms .modal-header .modal-title').html("Message Sending Processing");
      $('#one_time_sms .modal-body').html('<br><center>Please wait, we are processing your request....</center></br>');
      var postData = $(this).serializeArray();

      $.ajax({
        url: 'your_url',
        type: "POST",
        data: postData,
        success: function(data, textStatus, jqXHR) {
            $('#one_time_sms .modal-header .modal-title').html("Message Status");
            $('#one_time_sms .modal-body').html(data);

        },
        error: function(jqXHR, status, error) {
            console.log(status + ": " + error);
        }
    });
    e.preventDefault();
});

Jquery onclick事件触发一次

2 个答案: