Jquery onclick event firing once

Question

送信ボタンを使用してブートストラップ・モーダルでフォームを送信し、モーダルに応答を戻したい場合、ユーザーがリフレッシュをクリックすると、モーダルが以前の状態に戻ります。ここで

作業が、問題は、以前の状態に戻った後、SENDボタンを再度ない火災をしていることである...

は、あなたのHTMLが改訂なっているので、私はこれが起こっていると思いコード

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

ですフォームを送信するとすべての以前に作成されたDOM要素を削除し、新しいものを作成している

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

：ajaxポストのsuccessハンドラでは、次の行を持っています。だからevent以前に制限されたリスナーは動作しません。したがって、$("#submitForm").on('click', function() {と$("#refreshForm").on('click', function() {のコードは次回は動作しません。だからそれを避けるために。あなたはeventdelegation技術以下のように移動する必要があります：

$(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

あなたが同じページと「回避」は任意のリロードまたは却下に滞在したい場合あなたの "提出"実装を最初の場所で削除するよりも既存のモーダルの

「送信」イベントをトリガーする代わりに、「ボタン」クリックイベントバインディングを使用し、とにかくajax通信を使用しているように「アクション」URLを使用することをお勧めします。

だから、次は何ですか？

1. 私はそれがあなたにどんなメリットを追加見つからないとして、次のように削除します。

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

2. これは、それはフォームが提出していないし、データ・解任=同じモーダルに滞在するので、良い「モーダル」を使用していないので、あなたがモーダルを開く既存却下しません、これを追加します。完了

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