Jquery onclick Ereignis feuern einmal

Question

Ich möchte das Formular im Bootstrap-modal mit der Schaltfläche senden senden und die Antwort zurück auf das modale erhalten, wenn der Benutzer auf Aktualisieren klickt, sollte es das modale in den vorherigen Zustand zurück, jetzt, dass funktioniert, aber das Problem ist, dass die SEND-Taste erneut Feuer nicht nach dem bisherigen Stand der Rückkehr ...

Hier ist der Code

<!-- 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

ich denke, dies geschieht, weil Ihr HTML wird überarbeitet zu werden sobald Sie das Formular abgeschickt haben. In ajaxsuccess Handler Post haben Sie folgende Zeile ein:

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

die alle zuvor erstellten DOM-Element wird entfernt und neue zu schaffen. So event Hörer zuvor gebunden wird nicht funktionieren. Daher wird Ihr Code innerhalb von $("#submitForm").on('click', function() { und $("#refreshForm").on('click', function() { beim nächsten Mal nicht funktionieren. Also um es zu vermeiden; müssen Sie unten mit eventdelegation Technik wie gehen:

$(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(); 
    }); 

die submit Handler ändern auch unten wie:

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

Answer 2

Wenn Sie auf der gleichen Seite und ‚avoid‘ jede Nachladen oder Entlassung bleiben wollen von bestehenden modalen als entfernen Sie Ihre "submit" Implementierung an erster Stelle.

Ich schlage vor, "button" click event binding zu verwenden, anstatt "submit" -Ereignisse auszulösen und "action" -URL zu verwenden, da Sie sowieso Ajax-Kommunikation verwenden.

Also, was kommt als nächstes?

1. Entfernen Sie Folgendes, da ich keine Vorteile für Sie finde.

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

2. diese hinzufügen, dies wird Ihre bestehenden geöffnet modal nicht entlassen, weil es kein Formular ist, und Sie haben nicht verwendet, Daten-dismiss = „modal“ so gut auf gleiche modal zu bleiben.

   $("#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(); 
   });