Jquery onclick 이벤트가 한 번 실행됩니다.

Question

보내기 단추를 사용하여 부트 스트랩 모달에서 양식을 제출하고 응답을 다시 모달로 가져 오려면 새로 고침을 클릭하면 모달이 이전 상태로 돌아갑니다. ... 작동하지만 문제는 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을 수정하기 때문에 이런 일이 생각을하다 일단 양식을 제출하면됩니다. 이전에 생성 된 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

당신이 동일한 페이지와 '피하기'어떤 다시로드 또는 해산에 체류하려는 경우 기존 모달의 "제출"구현을 처음부터 제거하는 것보다.

"제출"이벤트를 트리거하는 대신 "버튼"클릭 이벤트 바인딩을 사용하고 아약스 통신을 사용하는 것처럼 '액션'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(); 
   });