JavaScript/JQuery funktioniert nicht in html geladen mit load()

Was ich versuche zu tun ist, laden Sie ein Eingabeformular aus einer anderen Datei (sagen wir das ist new_machine.php) in meine index.php. In dieser Form habe ich eine Eingabe mit Dropdown, die Optionen aus der MySQL-Datenbank holt und sie als Anker auflistet. Und das funktioniert gut. Ich möchte dann die Benutzereingabe mit jQuerys .click() -Methode steuern, also wenn ich auf einen bestimmten Anker geklickt habe, könnte ich seinen Text bekommen und ihn auf den Wert der Dropdown-Schaltfläche setzen. Dies geschieht jedoch nicht, da die Aktionen von jQuery anscheinend nicht ausgelöst werden. Also meine Frage ist, wie verwende ich jQuery in einer partiellen .html/.php, die ich in meine index.php laden. Meine Dateien sehen so aus:JavaScript/JQuery funktioniert nicht in html geladen mit load()

new_machine.php - das Formular - Ich weiß, es gibt keine Eingabe für Dropdown, ich möchte nur den Text in der Schaltfläche angezeigt, damit ich weiß, dass jQuery funktioniert.

<div class="tab-content"> 

... some text inputs 

<label> 
    Purchase date<span class="req">*</span> 
</label> 
<input type="date" required="" /> 


<label> 
    Machine<span class="req">*</span> 
</label> 

    <div class="dropdown"> 
     <button id="chosenGroup" class="dropbtn">Choose machine</button> 
     <div class="dropdown-content" id="machineList" > 
      <?php 
       session_start(); 
       try { 
        $bdd = new PDO('mysql:host=******:****; dbname=track', '*****', '*****'); 
       } catch(Exception $e) { 
        exit('Unable to connect to db.'); 
       } 

       $sql = "SELECT * FROM machinegroup WHERE UserID=:uid"; 
       $q = $bdd->prepare($sql); 
       $q->bindParam(':uid', $_SESSION['valid_user']); 
       $q->execute(); 
       while ($row = $q->fetch(PDO::FETCH_ASSOC)) 
       { 
        echo "<a href=\"#\" class=\"machineGroupClick\">". $row['Name'] ."</a>"; 
       } 
      ?> 
     </div> 
    </div> 


<script>  
$(document).ready(function(){ 
    $('.machineGroupClick').click(function(){ 
     var name = $(this).html(); 
     $('#machine-content').text('lalal'); 
     $('#chosenGroup').html(name); 
    }); 
}); 
</script>   


</div>

index.php

<head> 
... 
<script src="https://code.jquery.com/jquery.js"></script> 
<script src="machines/js/data.js"></script> 
... 
</head> 

<body> 
... 
<a href="#" id="new-machine">...</a> 

... 

<div id="machine-content" class="col-md-9" style="float:right"> 

... 

</body>

data.js (dies ist jQuery-Skript, das klicken und andere Ereignisse in meinem index.php Griffe)

$('#new-machine').click(function(){ 
    $('#machine-content').load('new_machine.php'); 
});

ich versuchte auch zu setzen jQuery Code von new_machine.php in index.php und in data.js, aber es hat nie funktioniert. Also meine Frage ist, was ist der richtige Weg, um jQuery beim Laden von Teil HTML/PHP zu verwenden? Fehle ich etwas Entscheidendes? Dropdown funktioniert gut, wenn der Code alle index.php ist und nicht geladen wird, aber ich möchte, dass es innerhalb der Seite geladen wird, wenn der Benutzer auf "Neue Maschine" klickt. Prost

Quelle

2016-06-10 Gregor Stopar

in der Mutter index.php – madalinivascu

Für dynamisch generierte Elemente verwenden [on()] (http://api.jquery.com/on/) Methode, Ereignisse zu binden – anu

data.js sollte wie folgt aussehen:

$(document).ready(function(){ 
    $('#machine-content').on('click','.machineGroupClick',function(){//use event delegation here because your html is in the partial and it is loaded after the dom ready 
     var name = $(this).html(); 
     $('#machine-content').text('lalal'); 
     $('#chosenGroup').html(name); 
    }); 
    $('#new-machine').click(function(){ 
    $('#machine-content').load('new_machine.php'); 
    }); 
});

Quelle

2016-06-10 10:36:30 madalinivascu

Danke, das hat es getan. –

JavaScript/JQuery funktioniert nicht in html geladen mit load()

Antwort

Verwandte Themen