爲什麼我的Ajax調用會觸發兩次？

我想通過創建每個記錄的刪除按鈕從數據表中刪除記錄。我的代碼問題，第一次點擊刪除按鈕刷新頁面並刪除記錄，第二次點擊按鈕Ajax啓動兩次，我沒有得到啓動模式，不能刪除記錄。任何建議如何解決Ajax發射兩次。爲什麼我的Ajax調用會觸發兩次？

的index.php

 <body> 
      <div id="test1234"> 
      <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%"> 
       <thead> 
        <tr> 
         <th>fname</th> 
         <th>lname</th> 
         <th>email</th> 
         <th>username</th> 
         <th>Delete</th> 
        </tr> 
       </thead> 


       <tbody> 
       <?php 
        // connect to mongodb 
        $m = new MongoClient(); 
        $db = $m->local; 
        $collection = $db->user; 

        $results = $collection->find(); 

        foreach($results as $res){ 
         $fname = $res['fname']; 
         $lname = $res['lname']; 
         $email = $res['email']; 
         $username = $res['username']; 

       ?> 
        <tr> 
         <td><?php echo $fname; ?></td> 
         <td><?php echo $lname; ?></td> 
         <td><?php echo $email; ?></td> 
         <td><?php echo $username; ?></td> 
         <td><a href="javascript:void(0)" class="btn btn-theme btn-sm idname" data-toggle="modal" data-target="#md-normal" id=<?php echo $email ?> name="email" title="Delete"><i class="fa fa-trash-o"></i></a></td> 
        </tr> 
       <?php 
        } 
       ?> 
       </tbody> 
      </table> 
      </div> 
      </body> 
     </html> 

     <script> 
      $(document).ready(function(){ 
      $('#example').DataTable(); 
      $(document).on('click','.idname', function(){ 
       var data = $(this).serialize(); 
       var aa = $(this).attr('id'); 
       alert('open modal: '+aa); 
       $.ajax({ 
       type: 'POST', 
       url: 'modal.php', 
       async:false, 
       data: ({name:aa}), 
       cache: false, 
       success: function(data){ 
        $('#results').html(data); 
       } 
       }) 
       return false; 
      }); 
      }); 
     </script> 

     <div id="results"></div>

modal.php

 <?php 
      $email = $_POST['name']; 
     ?> 



     <div id="myModal" class="modal fade" role="dialog"> 
      <div class="modal-dialog"> 


      <div class="modal-content"> 
       <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title"><?php echo $email; ?></h4> 
       </div> 
       <div class="modal-body"> 
       <p>Some text in the modal.</p> 
       </div> 
       <div class="modal-footer"> 
       <form action="deleteUser.php" id="formsubmit1" method="POST"> 
       <input type='hidden' id="email" name="email" value=<?php echo $email ?> > 
       <input type="submit" id="submit" value="Submit" > 
       </form> 
       <button type="button" class="btn btn-default" data-dismiss="modal">No</button> 
       </div> 
      </div> 

      </div> 
     </div> 

     <script> 
     $(document).ready(function() { 
      $('#myModal').modal('show'); 
     }); 
     </script> 

     <script> 
      $(document).ready(function(){ 
      $('#formsubmit1').on('submit',function(){ 
       alert('opened'); 
       //e.preventDefault(); 
       var data = $(this).serialize(); 
       $.ajax({ 
       type: 'POST', 
       url: 'deleteUser.php', 
       data: data, 
       cache: false, 
       success: function(data){ 

        $('#results3333').html(data); 
        //alert('res2'); 
       } 
       }) 
       return false; 
      }); 

      $('#formsubmit1').on('submit', function(){ 
       //alert('close'); 
       $('#myModal').hide(); 
       $('.modal-backdrop').hide(); 
      }); 

      //refresh page 
      $('#formsubmit1').on('submit', function(){ 
       alert('refresh'); 
       //e.preventDefault(); 
       var data = $(this).serialize(); 
       $.ajax({ 
       type: 'POST', 
       url: 'index.php', 
       data: data, 
       cache: false, 
       success: function(data){ 

        $('#test1234').html(data); 

        alert('ref2'); 
       } 
       }) 
       return false; 
      }); 
      }); 
     </script>

userDelete.php

  <?php 
       $email = $_POST['email']; 
       $m = new MongoClient(); 
       $db = $m->local; 
       $collection = $db->user; 

       $results = $collection->remove(array('email' => $email)); 


      ?>

來源

2015-12-06 mike2828

你有兩次'$（ '＃formsubmit1'）。在（ '提交'，函數（）{'用Ajax調用內 –

Ajax調用火災高達兩倍的index.php，我有$（'＃formsubmit1'）。on（'submit'，function（）only一次@Michelem – mike2828

正如@Michelem提到有附加的提交，處理多種功能的在modal.php中使用id formsubmit1來形成。

$('#formsubmit1').on('submit',function(){ 
      alert('opened'); 
      //e.preventDefault(); 
      var data = $(this).serialize(); 
//////////////////HERE//////////////////////// 
      $.ajax({ 
      type: 'POST', 
      url: 'deleteUser.php', 
      data: data, 
      cache: false, 
      success: function(data){ 

       $('#results3333').html(data); 
       //alert('res2'); 
      } 
      }) 
      return false; 
     }); 

     $('#formsubmit1').on('submit', function(){ 
      //alert('close'); 
      $('#myModal').hide(); 
      $('.modal-backdrop').hide(); 
     }); 

     //refresh page 
     $('#formsubmit1').on('submit', function(){ 
      alert('refresh'); 
      //e.preventDefault(); 
      var data = $(this).serialize(); 
    //////////////////HERE//////////////////////// 
      $.ajax({ 
      type: 'POST', 
      url: 'index.php', 
      data: data, 
      cache: false, 
      success: function(data){ 

       $('#test1234').html(data); 

       alert('ref2'); 
      } 
      }) 
      return false; 
     });

來源

2015-12-06 21:59:31

謝謝，但我的問題是在index.php – mike2828

好的，這是什麼問題？ –

如果你已經找到答案發布它一個解決方案，所以其他人也可以參考它。 –

爲什麼我的Ajax調用會觸發兩次？

回答

相關問題