Javascript-forum
div(tabelle) neugeladen button(tabelle) dann ohne funktion - Druckversion

+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4)
+--- Forum: Javascript (https://javascript-forum.de/forumdisplay.php?fid=6)
+--- Thema: div(tabelle) neugeladen button(tabelle) dann ohne funktion (/showthread.php?tid=2872)



div(tabelle) neugeladen button(tabelle) dann ohne funktion - black79 - 25.04.2024

Code:
<?php
$titel='Web-Portal | Webportal';
require("includes/reporting_error.php");
require("includes/config.php");
require("includes/header.php");
require("includes/menu.php");  
require("includes/mysql.php");

$statement = $pdo->prepare("SELECT * FROM tbl_user WHERE tbl_user.online = '1'");
$statement -> execute();
?>

<div id="content" class="p-4 p-md-5 pt-5">
    <br>
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
                aria-selected="true">Webportal Testseite Laptop</a>
        </li>
    </ul>
 
            <br>

    <div> 
        <button type="button" class="btn btn-outline-primary btn-test" value="button1" id="button1" ><i class="fa fa-refresh"></i></button>
        <button type="button" class="btn btn-outline-primary btn-test" value="button2" id="button2" ><i class="fa fa-info"></i></button>
    </div>
   
    <p class="paragraph-index" style="margin: 10px">derzeit angemeldete Test-Benutzer :</p>

     <div id="table_user"><!-- <div Anfang load> -->
        <table class="table table-striped table-bordered table-sm">
                <thead>
                 <tr>
                    <th scope="col">User-Id</th>
                    <th scope="col">E-Mail</th>        
                    <th scope="col">Smartphone</th>      
                 </tr>
                </thead>
                    <tbody>
                        <?php while  ($datensatz = $statement->fetch(PDO::FETCH_ASSOC)) : ?>
                            <tr>
                                <td scope="row"><?= htmlspecialchars ($datensatz['userid']); ?></td>
                                <td scope="row"><?= htmlspecialchars ($datensatz['email']); ?></td>
                                <td scope="row"><?= htmlspecialchars ($datensatz['mobilfunk']); ?></td>
                                <td scope="row" style="width:25px"><button class="btn-danger btn-btn3"
                                    value="<?= htmlspecialchars ($datensatz['userid']); ?>">
                                        <i class="fa fa-ban"></i></button></td>
                            </tr>
                        <?php endwhile ?>
                    </tbody>
        </table>
    </div>  <!-- <div Ende load> -->                               
<?php
require("includes/footer.php");
?>

Code:
$("#button1").click(function(){
    $("#table_user").load(window.location.href + " #table_user");
});

wurde das div  id="table_user" neugeladen, hat der Button in der Tabelle keine Funktion mehr.


RE: div(tabelle) neugeladen button(tabelle) dann ohne funktion - Sempervivum - 25.04.2024

Wenn Du den Inhalt des div#table_user neu lädst parst der Browser das neu und die Eventlistener gehen verloren. Das lässt sich einfach beheben, indem Du dir das Eventbubbling zu Nutze machst, siehe das Beispiel hier:
https://api.jquery.com/on/#direct-and-delegated-events


RE: div(tabelle) neugeladen button(tabelle) dann ohne funktion - black79 - 26.04.2024

(25.04.2024, 14:58)Sempervivum schrieb: Wenn Du den Inhalt des div#table_user neu lädst parst der Browser das neu und die Eventlistener gehen verloren. Das lässt sich einfach beheben, indem Du dir das Eventbubbling zu Nutze machst, siehe das Beispiel hier:
https://api.jquery.com/on/#direct-and-delegated-events

Hallo, vielen Dank für Deine Antwort.

Das mit dem Eventlistener ist alles Neuland für mich. Hast Du zum Einstiegt ein kleines Beispiel für mein Projekt?
Muss ich den Event-Handler kopieren?
 
Vielen Dank


RE: div(tabelle) neugeladen button(tabelle) dann ohne funktion - Sempervivum - 26.04.2024

Hallo, leider wird in der Doku von jQuery ein entscheidender Vorteil des Eventbubbling bzw. -delegation nicht erwähnt: Damit funktionieren Eventlistener auch dann, wenn die betr. Elemente nachgeladen werden, wie es bei dir der Fall ist.

Das Beispiel in der Doku kannst Du auch nicht 1-zu-1 auf deinen Fall übertragen sondern Du musst den Eventlistener auf ein Element registrieren, das außerhalb des nachgeladenen Bereiches liegt. D. h. bei dir müsste es so aussehen:
Code:
$(document).on('click', 'sel', function(event) {
    // hier die Aktionen für das Event
});
Wobei 'sel' der Selektor des Elementes ist, wo Du die Events abfangen willst. Beispiel:
'td button'


RE: div(tabelle) neugeladen button(tabelle) dann ohne funktion - black79 - 26.04.2024

(26.04.2024, 16:25)Sempervivum schrieb: Hallo, leider wird in der Doku von jQuery ein entscheidender Vorteil des Eventbubbling bzw. -delegation nicht erwähnt: Damit funktionieren Eventlistener auch dann, wenn die betr. Elemente nachgeladen werden, wie es bei dir der Fall ist.

Das Beispiel in der Doku kannst Du auch nicht 1-zu-1 auf deinen Fall übertragen sondern Du musst den Eventlistener auf ein Element registrieren, das außerhalb des nachgeladenen Bereiches liegt. D. h. bei dir müsste es so aussehen:
Code:
$(document).on('click', 'sel', function(event) {
    // hier die Aktionen für das Event
});
Wobei 'sel' der Selektor des Elementes ist, wo Du die Events abfangen willst. Beispiel:
'td button'

 Danke :-) das funktioniert sehr gut!