JQuery Ajax: Auf nachgeladenen Content zugreifen

saebelzahntiger

Grünschnabel
Hallo,
ich habe die Seite Nutzerverwaltung, auf der ich eine Übersicht über sämtliche Nutzer und deren Rechte anzeigen lassen möchte. Dies geschieht auf der Seite nutzerverwaltung.php
PHP:
<div class="panel-group" id="accordion">
<?php
foreach ($customer->getUserFromCustomer($dbh, $_SESSION[$session_kunden_nr]) as $nutzer) {
?>
     <div class="panel panel-default">
       <div class="panel-heading">
         <h4 class="panel-title">
           <a class="zeige-user-rechte" data-nutzer="<?php echo $nutzer['id']; ?>" data-toggle="collapse" data-parent="#accordion" href="#nutzer_<?php echo $nutzer['id'] ?>"><?php echo $nutzer['nickname'] ?></a>
         </h4>
       </div>
       <div id="nutzer_<?php echo $nutzer['id'] ?>" class="panel-collapse collapse">
         <div class="panel-body-<?php echo $nutzer['id'] ?>">
        
         </div>
       </div>
     </div>
<?php
}
?>
</div>
<div class="panel-group" id="accordion_2">
   <div class="panel panel-default" style="margin-top:20px;">
     <div class="panel-heading">
       <h4 class="panel-title">
         <a class="add-new-user" data-toggle="collapse" data-parent="#accordion_2" href=<?php echo $anzahl_verbleibender_nutzer >= 1 ? '#neuer_nutzer' : 'false' ?>>Neuer Nutzer (<span id="unused-user"><?php echo $anzahl_verbleibender_nutzer ?></span> verbleibend)</a>
       </h4>
     </div>
     <div id="neuer_nutzer" class="panel-collapse collapse">
       <div class="panel-body">
      
         <div class="formerrortext">
           <ul id="formerrortextul">
          
           </ul>
         </div>
        
         <form role="form" id="form_neuer_nutzer">
          .........
         </form>        

       </div>
     </div>
   </div>
</div>

<script type="text/javascript">

$(document).ready(function () {
  
   $(".zeige-user-rechte").click(function() {
    
     var nutzer = $(this).data("nutzer");
    
     if ($("#nutzer_" + nutzer).hasClass("collapse in")) {
       return;
     } else {
      
       $.ajax({
         url:  'lade_nutzerrechte.php',
         type:  "post",
         async:  false,
         data:  {
               nutzer: nutzer
         },
         success:  function(data) {
           //var rdata = JSON.parse(data);
           if (data) {
             // Eintrag erfolgreich
             $(".panel-body-" + nutzer).html("");
             $(".panel-body-" + nutzer).append(data);
           }
           else {
             // Fehlerausgabe
            
           }
         }
       });

     }
   });
});

$("#form_neuer_nutzer").submit(function(event) {

........................
  
   if (fehler == 0) {
     $.ajax({
       url:  'neuer_nutzer.php',
       type:  "post",
       async:  false,
       data:  {
             name: name,
             kuerzel: kuerzel,
             passwort: passwort
       },
       success:  function(data) {
         var rdata = JSON.parse(data);
         if (rdata.success == 1) {
           // Eintrag erfolgreich
           $("#form_neuer_nutzer").trigger('reset');
           $("#accordion").append("<div class=\"panel panel-default\"><div class=\"panel-heading\"><h4 class=\"panel-title\"><a data-toggle=\"collapse\" data-parent=\"#accordion\" href=\"#nutzer_" + rdata.id + "\">" + name + "</a></h4></div><div id=\"nutzer_" + rdata.id + "\" class=\"panel-collapse collapse\"><div class=\"panel-body\"></div></div></div>");
          
           anzahl_verbleibender_nutzer--;
           $("#unused-user").text(anzahl_verbleibender_nutzer);
           if (anzahl_verbleibender_nutzer < 1) {
             $("#neuer_nutzer").removeClass("in");
             $("a.add-new-user").attr("href", "false");
           }
         }
         else {
           // Fehlerausgabe
           $("#formerrortextul").append("<li>"+ rdata.error_message +"</li>");
         }
       }
     });
   }
   else {
     return false;
   }
   event.preventDefault();
});

</script>

Die Rechte werden in einem Bootstrap-Accordion angezeigt. Sie werden dynamisch bei einem Klick auf das div per Ajax geladen und in dem aufgeklappten Accordion angezeigt. Das klappt auch alles prima. Nur wenn ich jetzt einen neuen Nutzer erstelle, zeigt er mir bei einem Klick auf das div keine Nutzerrechte an, sondern klappt das div nur auf. Erst nach einem Seitenrefresh werden mir auch die Nutzerrechte des neuen Users angezeigt.

Wieso greift das Click-Event erst nach einem Seitenrefresh und wie kann ich das ändern?

Viele Grüße
 
eventListener können nur auf schon bestehende Elemente angehängt werden.
Bei dynamisch nachgeladenen oder erstellten Objekten musst du den eventListener delegieren.
Schau hier: https://learn.jquery.com/events/event-delegation/


Javascript:
$("div.ajaxcontent-container").on("click","#id-of-the-element-in-the-ajax-content",function(){
console.log($(this));});
"div.ajaxcontent-container" is der Selector für einen schon vorhandenen Container
"#id-of-the-element-in-the-ajax-content" ist der Selector für das Objekt in diesem Container. Da der eventListener aber am Container hängt ist es egal ob das "#id-of-the-element-in-the-ajax-content" Objekt schon existiert oder erst später erstellt wird.
 
Zurück