javascript - Jquery onclick 事件触发一次

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 post 的 success 处理程序中，您有以下行:

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

这将删除所有先前创建的 DOM 元素并创建新的元素。所以之前绑定(bind)的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();