.click function

Question

Witam! Ostatnio zastał mnie bardzo dziwny problem, otóż mam kod ajax, który odpowiada za wczytywanie kolejnych rekordów z bazy danych. Wygląda to tak, że mam przycisk i po naciśnięciu LIMIT w zapytaniu zwiększa się, oto mój kod:

$(document).ready(function() {
    var limit = 1;

    $("button").click(function () {
        limit = limit + 1;

        $("#loadedposts").load("PhpScripts/postloader.php", {
            newLimit: limit
        });
    });
});

To jest kod php przed kliknięciem przycisku z id #more:

                <?php
                $limit = 1;

                $posts = $pdo->prepare('SELECT * FROM posts ORDER by id DESC LIMIT :limit');
                $posts->bindParam(':limit',$limit, PDO::PARAM_INT);
                $posts->execute();

                foreach ($posts->fetchAll() as $post){

                echo'<div class="sentry">';

                echo'<h2>'.$post['title'].'</h2>';

                $text = $post['text'];
                $words = 600;
                $text = strip_tags($text);
                if (strlen($text) > $words){
                    $text=substr($text, 0, $words);
                    for ($a=strlen($text)-1;$a>=0;$a--){
                        if ($text[$a]==" "){
                            $text=substr($text, 0, $a)."...";
                            break;
                        }
                    }
                }
                echo '<p>'.$text.'</p>';

                $timestamp = strtotime($post['date']);
                echo'<p><i class="icon-user" style="font-size: 14px;"></i>' . $post['author'] . '&nbsp; <i class="icon-calendar" style="font-size: 14px;"></i>';
                echo date("d-m-Y", $timestamp); echo'&nbsp; <i class="icon-clock" style="font-size: 14px;"></i>'; echo date("H:i", $timestamp);
                if(isset($_POST['newRank']) && $_POST['newRank']=="1"){echo'<br>&nbsp;<a href="deletepost.php?id=' . $post['id'] . '">Usuń</a> &nbsp; <a href="posts.php?id=' . $post['id'] . '">Edytuj</a>';} echo'</p>';
                echo '</div>';
                }

                $nRows = $pdo->query('SELECT count(*) FROM posts')->fetchColumn();

                if($limit < $nRows){
                    echo'<button id="more">Pokaż więcej</button>';
                } ?>

A to jest kod który się wczytuje z osobnego pliku html do diva z id #loadedposts

<?php
require_once 'connect.php';

$limit = $_POST['newLimit'];

$posts = $pdo->prepare('SELECT * FROM posts ORDER by id DESC LIMIT :limit');
$posts->bindParam(':limit',$limit, PDO::PARAM_INT);
$posts->execute();

foreach ($posts->fetchAll() as $post){

    echo'<div class="sentry">';

    echo'<h2>'.$post['title'].'</h2>';

    $text = $post['text'];
    $words = 600;
    $text = strip_tags($text);
    if (strlen($text) > $words){
        $text=substr($text, 0, $words);
        for ($a=strlen($text)-1;$a>=0;$a--){
            if ($text[$a]==" "){
                $text=substr($text, 0, $a)."...";
                break;
            }
        }
    }
    echo '<p>'.$text.'</p>';

    $timestamp = strtotime($post['date']);
    echo'<p><i class="icon-user" style="font-size: 14px;"></i>' . $post['author'] . '&nbsp; <i class="icon-calendar" style="font-size: 14px;"></i>';
    echo date("d-m-Y", $timestamp); echo'&nbsp; <i class="icon-clock" style="font-size: 14px;"></i>'; echo date("H:i", $timestamp);
    if(isset($_POST['newRank']) && $_POST['newRank']=="1"){echo'<br>&nbsp;<a href="deletepost.php?id=' . $post['id'] . '">Usuń</a> &nbsp; <a href="posts.php?id=' . $post['id'] . '">Edytuj</a>';} echo'</p>';
    echo '</div>';
}

$nRows = $pdo->query('SELECT count(*) FROM posts')->fetchColumn();

if($limit < $nRows){
    echo'<button id="more">Pokaż więcej</button>';
}

Problem jest w tym, że po załadowaniu kodu z pliku postloader.phpm javascript przestał reagować na przycisk z id #more

Answer 1

Bo nadpisujesz przycisk, więc jest to nowiutki element, do którego nie jest przypięty żaden listener. Tutaj trzeba zastosować event delegation.

Comments

troszeczkę nie rozumiem... Jak mógłbym to zastosować?

---

Przypiąć się do #loadedposts.

---

wszystko działa, dzięki za pomoc ;)