Button from a ajax post page doesnt work when clicked

Question

I have a commenting project that has a button id #see_more_comments inside my .user__comments__container div that is being outputted from a getcomments-afunc.php file via jquery post when the comment is more than 4. The file code of ajax.php is:

<?php
session_start();
include_once '../dbh-inc.php';

if (isset($_SESSION['userid'])) {

    $jobsid = mysqli_real_escape_string($conn, $_POST['jid']);
    $output = "";

    $sql = "SELECT * FROM comments AS c INNER JOIN users AS u ON c.usersId = u.usersId WHERE c.jobsId = '$jobsid' ORDER BY c.cid DESC LIMIT 4;" ;
    $result = mysqli_query($conn, $sql);
    $commentcount = 3;
    if (mysqli_num_rows($result) > $commentcount) {
        while ($row = mysqli_fetch_assoc($result)) {
        $usersid = $row['usersId'];
        $commenterprofilepic = $row['usersProfilePic'];
        $username = $row['usersName'];
        $usersusername = $row['usersUsername'];
        $commentDesc = $row['commentDesc'];
        $commentDate = $row['commentDate'];

                $output .= '<div class="user__comments">
                                <img src="profilepic/'.$commenterprofilepic.'" alt="'.$username.'\'s profile picture" class="profile__thumbnail" onclick="location.href=\'profile?uid='.$usersid.'\'">
                                <div class="comment__bubble">
                                    <div class="comment__box">
                                        <p class="username" onclick="location.href=\''.$usersusername.'\'">'.$username.'</p>
                                        <p class="comment">'.nl2br($commentDesc).'</p>
                                    </div>
                                    <p class="date">'.$commentDate.'</p>
                                </div>
                            </div>';

        }
         $output .= '<div class="see__more__comments" id="see_more_comments">See more comments..</div>';
    }
    echo $output;
}
else {

    header("../../dashboard.php");
    exit();
}

Now, when it is outputted to my index.php via a jquery post call, it is registered and can be seen at the elements tab of my browser or DOM.

It is outputted via this jquery code:

setInterval(() => {
            $.post('includes/ajax-func/getcomments-afunc.php', {
                jid : pageId
            }, function (response) {
                $('.user__comments__container').html(response);
            });
        }, 10000
    );

However, when I am clicking so that it will add 4 more comments to my .user__comments__container index.php. It doesnt work, I tried making a console.log for it but it hasnt outputted anything, this is the code for clicking the button:

$('#see_more_comments').click(function() {
        commentCount = commentCount + 4;
        $('.user__comments__container').load('includes/ajax-load/seemorecomments-aload.php' , {
            jobsId : pageId,
            newCommentCount : commentCount
        });
        console.log(commentCount);
    });

And this is the seemorecomments-aload.php content:

<?php
session_start();
include_once '../dbh-inc.php';
    
    $jobsid = $_POST['jobsId'];
    $newcommentcount = $_POST['newCommentCount'];

$sql = "SELECT * FROM comments AS c INNER JOIN users AS u ON c.usersId = u.usersId WHERE c.jobsId = '" . $jobsid . "' ORDER BY c.cid DESC LIMIT $newcommentcount;" ;
$result = mysqli_query($conn, $sql);
while ($row = mysqli_fetch_assoc($result)) {
    $usersid = $row['usersId'];
    $commenterprofilepic = $row['usersProfilePic'];
    $username = $row['usersName'];
    $usersusername = $row['usersUsername'];
    $commentDesc = $row['commentDesc'];
    $commentDate = $row['commentDate'];

        echo '<div class="user__comments">
        <img src="profilepic/'.$commenterprofilepic.'" alt="'.$username.'\'s profile picture" class="profile__thumbnail" onclick="location.href=\''.$usersusername.'\'">
        <div class="comment__bubble">
            <div class="comment__box">
                <div class="username" onclick="location.href=\''.$usersusername.'\'">'.$username.'</div>
                <div class="comment">'.$commentDesc.'</div>
            </div>
            <div class="date">'.$commentDate.'</div>
        </div>
    </div>';
}

Before all of this, I have all getcomments-afunc.php content without the $output, $output is replaced by echo, inside my index.php .user__comments__container and it worked just fine..

However, when I decided to add jquery to it so that I wont need to reload the wholepage, my purpose of letting the .user__coments__container reload itself worked but the button doesnt work anymore.

Any help? thank you!! :(

can you change `$('#see_more_comments').click(function() {` to `$(document).on('click','#see_more_comments',function() {` ? — Swati, Apr 02 '21 at 06:34

score 0 · Accepted Answer · answered Apr 02 '21 at 06:43

0

Change the line

$('#see_more_comments').click(function() {

To

$(document).on("click","#see_more_comments",function() {

answered Apr 02 '21 at 06:43

Majid Ali

109
6

It worked!! by using `$(document).on("click","#see_more_comments",function() {` May I know why $('#name').click doesnt work sometimes?? – Dann carlo Reformado Apr 02 '21 at 07:16
Mark the answer as accepted and vote up lol – Majid Ali Apr 02 '21 at 07:20
Yes will do haha, just wanna know why is that can u elaborate?? – Dann carlo Reformado Apr 02 '21 at 07:25
This might get the answer to your question https://stackoverflow.com/questions/14879168/document-onclick-id-function-vs-id-onclick-function – Majid Ali Apr 02 '21 at 07:38

score 0 · Answer 2 · answered Apr 02 '21 at 07:16

0

Thanks Mr. Majid Ali and Mr. Swati,

It worked!! by using $(document).on("click","#see_more_comments",function() {

May I know why $('#name').click doesnt work sometimes??

answered Apr 02 '21 at 07:16

Dann carlo Reformado

23
6

Button from a ajax post page doesnt work when clicked

2 Answers2