Problem z uruchomieniem kodu jQuery w php

Question

Mam taki kod jQuery w pliku HTML:

            <script>
                $(document).ready(function(){
                    $("#glowny").click(function(){
                        $(".item2").load("przechwyt.php #eh");
                        event.preventDefault();
                    });
                });
            </script>

Gdy kliknę butona strona prawidłowo zmienia się na przechwyt.php i dokładnie na div #eh. Jednakże skrypt na stronie php już nie działa jak powinien

<script language="JavaScript">
 $(document).ready(function(){
    $(".poboczny").click(function(){
        $(".item2").load("przechwyt.php #eh2");
        event.preventDefault();
    });           
});
</script>
<div id="eh">
<?php
    $conn = mysqli_connect("localhost", "root", "", "quiz");
    $conn -> query ('SET NAMES utf8');
    $conn -> query ('SET CHARACTER_SET utf8_unicode_ci');
        
    $sql1 = "SELECT id,pytanie, odpa, odpb FROM pytania WHERE id = 1";
    $result = mysqli_query($conn, $sql1);
        while($row = mysqli_fetch_assoc($result)) {
                print_r($row['id']);
                    echo "<p id='para'>" ."Pytanie: " . $row["pytanie"]. "</p>"."<br>";
                    echo "<button class='poboczny'>" . $row["odpa"]. "</button>";
                    echo "<button class='poboczny'>" . $row["odpb"]. "</button>";
        }
?>
</div>
<div id="eh2">
<?php
    $sql2 = "SELECT id,pytanie, odpa, odpb FROM pytania WHERE id = 2";
    $result = mysqli_query($conn, $sql2);
        while($row = mysqli_fetch_assoc($result)) {
                print_r($row['id']);
                    echo "<p id='para'>" ."Pytanie: " . $row["pytanie"]. "</p>"."<br>";
                    echo "<button>" . $row["odpa"]. "</button>";
                    echo "<button>" . $row["odpb"]. "</button>";
        }
?>
</div>

Żaden gdy kliknę buttona nie załadowuje się część z divem #eh2. Dodam, że skrypt działa, jeśli pierwszy przechwyt nie jest konkretnie skierowany na div #eh, tylko cały plik. Podejrzewam, że winowajcą jest to, że wczytuje tylko dane z diva #eh, bez skryptu js na górze i dlatego buttony nie reagują, ale gdy wklejałem skrypt js, żeby był w divie również nie działa. Co może być przyczyną więc? Jeśli się nieprecyzyjnie wysłowiłem to oczywiście mogę spróbować to zrobić jaśniej, jeśli zajdzie taka potrzeba.

Comments

Jest w formularzu, między <form>

<button id="glowny" type="submit">Rozpocznij test</button>

Czy możesz opisać całe flow po kolei w punktach?

Oczywiście:
1. Klikam w guzik z id #glowny
2. Część grida z klasą ".item2" zamienia się na fragment pliku przechwyt.php, tym fragmentem jest div #eh
3. Na stronie pojawia się tekst załadowany z bazy danych, a pod nim 2 guziki, z klasą ".poboczny"
4. Gdy klikam na jeden z guzików nic się nie dzieje, a powinno, strona powinna się załadować wedle poniższego skryptu

$(document).ready(function(){
    $(".poboczny").click(function(){
        console.log('test');
        $(".item2").load("przechwyt.php #eh2");
        event.preventDefault();
    });           
});

Gdy patrze do konsoli do tego skryptu to tam go nie ma. Jestem prawie pewien, że być tam powinien.
Dodam, że gdy skrypt z HTML zrobimy tak (bez wczytania konkretnie diva #eh)

<script>
    $(document).ready(function(){
        $("#glowny").click(function(){
            $(".item2").load("przechwyt.php");
            event.preventDefault();
        });
    });
</script>

Wszystko działa, strona ładuje oba zapytania z bazy i gdy klikne na guziki z klasą .poboczny to kod jQuery działa, a w samej konsoli również jest skrypt jQuery, tak więc nie czyta tego kodu na szczycie w pliku przechwyt.php, ale nie działa on również gdy go wsunę pod diva. 

---

Gdyby problem wciąż był nierozwiązany, bądź niezrozumiany to wrzucę kod do jakiegoś edytora w necie.

---

Według dokumentacji jQuery metoda load, gdy podasz tam selektor, umieści w elemencie w kontekście którego użyłeś tej metody (u Ciebie .item2) tylko zawartość znalezionego przez selektor elementu, a nie całą treść zasobu - fragment kodu źródłowego metody w jQuery. Dedukuję, że W Twoim przypadku plik przechwyt.php nie jest wczytany w całości, co potwierdza Twoja obserwacja:

Gdy patrze do konsoli do tego skryptu to tam go nie ma. Jestem prawie pewien, że być tam powinien. 

Pytanie - dlaczego używasz dodatkowego selektora przy wczytywaniu pliku?

---

Taką metodę wymyśliłem na potrzeby quizu. Jest strona, gdy klikam guzik ładuje się podstrona w okienku .item2 na tej stronie, następny guzik – następna strona. Oczywiście mógłbym zrobić 40 plików html i je wywoływać a hrefem, ale bądźmy poważni, nie będzie to ani wygodne, ani nie da takiego ładnego efektu jak przy ajaxie.

---

tak więc nie czyta tego kodu na szczycie w pliku przechwyt.php, ale nie działa on również gdy go wsunę pod diva. 

Kod jQuery nie działa Ci też, jeśli znajduje się wewnątrz elementu, którego selektor podajesz do metody load? Jeśli wtedy jednak działa, to może serwuj podstronę ze skryptem, albo skorzystaj z event delegation - podepnij klik na wrapper, w którym ładujesz te podstrony i będziesz mieć jeden skrypt do obsługi zdarzeń na elemencie, którego treść zmieniasz dynamicznie.

P.S. Już @pablop76 podpowiedział Ci, żebyś skorzystał z event delegation.

Powinieneś mieć wszystkue skrypty w pliku głównym i wykorzystać event delegation on()

Answer 1

Ponieważ ładujesz tylko konkretny fragment strony przechwyt.php bez przeładowania, więc ten skrypt się nie ładuje. Powinieneś mieć wszystkue skrypty w pliku głównym i wykorzystać event delegation on()

Comments

Wrzuciłem wszystko do head'a. Nie wiem czy dobrze używam tego eventu, w jaki sposób ty byś go użył?

---

Ja też nie wiem. Ale jak nie działa to znaczy, że coś jest źle.

Łapiesz za element, który bedzie zawierał treść ładowaną dynamicznie i przekazujesz zdarzenie do tych obiektów