div(tabelle) neugeladen button(tabelle) dann ohne funktion

[black79]

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.

[Sempervivum]

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

[black79]

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

[Sempervivum]

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'

[black79]

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!