Utilisation du nom de classe pour intercepter l'événement .click()

Question

Mon code ajax n'attrape pas l'événement .click avec le type de code suivant dans lequel j'essaie d'intercepter l'événement .click à l'aide de view_data.

<div id="dataModal" class="modal fade"> 
     <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">Need to Pud ID and Name of Work here..What the....</h4> 
       </div> 
       <div class="modal-body" id="workstatustable"> 
        <input type="button" name="AMWP/2017-18/1" value="AMWP/2017-18/1" id="AMWP/HQTC/2017-18/1" class="btn btn-info btn-xs view_data"> 
        <input type="button" name="AMWP/2017-18/2" value="AMWP/2017-18/2" id="AMWP/HQTC/2017-18/2" class="btn btn-info btn-xs view_data"> 
        <input type="button" name="AMWP/2017-18/3" value="AMWP/2017-18/3" id="AMWP/HQTC/2017-18/3" class="btn btn-info btn-xs view_data">     
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-info btn-sm" data-dismiss="modal">Update Status</button> 
        <button type="button" class="btn btn-info btn-sm" data-dismiss="modal">Close</button> 
       </div> 
      </div> 
     </div> 
    </div> 

mon code ajax est la suivante: -

$('.view_data').click(function(){ 
       var modwork_id = $(this).attr("id"); 
       $('#show_modid').html($(this).attr("id")); 
       fetchModal(); 
      }); 

function fetchModal() { 
       var modwork_id = $("#show_modid").html(); 
       window.alert($("#show_modid").html()); 
       $('#viewstatus_Modal').modal("show"); 
       $.ajax({  
        url:"workstatus.php", 
        method:"POST",  
        data:{modwork_id:modwork_id}, 
        success:function(data){  
         $('#workstatustable').html(data);  
         $('#viewstatus_Modal').modal("show"); 
        } 
       }); 
      }; 

La question est la fenêtre modale n'est pas popping up.

Answer 1

Got It ... J'ai déplacé la position du ajax() et son cool ....

function fetchModal() { 
       var modwork_id = $("#show_modid").html(); 
       window.alert($("#show_modid").html()); 
       $('#viewstatus_Modal').modal("show"); 
       $.ajax({  
        url:"workstatus.php", 
        method:"POST",  
        data:{modwork_id:modwork_id}, 
        success:function(data){  
         $('#workstatustable').html(data);  
         $('#viewstatus_Modal').modal("show"); 
         $('.view_data').click(function(){ 
          var modwork_id = $(this).attr("id"); 
          $('#show_modid').html($(this).attr("id")); 
          fetchModal(); 
         }); 
         } 
       }); 
      }; 

Answer 2

le problème est ici.

vous ne déclarez pas la classe correctement comme u écrire en ajax est .view_data et #show_modid

vous devez le faire >>

class="modal view_data fade " 

vous pouvez donc utiliser " .view_data "dans votre ajax. et faire >>

"#dataModal" 

dans votre ajax

espère que cela vous aidera.

Answer 3

J'ai eu l'âme au problème. J'essayais de joindre une fonction() à un élément HTML avant que l'élément/l'élément ait été déclaré ou trouvé sur la page. J'ai inséré l'appel ajax() dans la clause Success :. Le plan fonctionne maintenant. Merci.