Subsequently uploaded button does't work - php

Question

I wanna make like system that system suggest books to user with JQuery and user like it.
First, at index.php has 2 suggested book. And there is no problem. User can click Like Button. And new book is uploaded insted of liked book. But user can not click the button. The page can not connect functions.js page.
My codes is:
At index.php
<!-- Suggest book -->
<div class="book-box" id="<?php echo $book_id;?>" style="background: #fff;box-shadow: 0 0 1px 1px rgba(0,0,0,.2); min-height: 60px;margin-bottom: 10px!important;bg-444;" data-target="<?php echo $book_id;?>">
<img src="img/<?php echo $ki_image;?>" style="width:100%; height: 150px;padding:0;" alt="">
<div class="container-fluid" style="">
<div class="row" style="">
<div class="caption mt5 p5" style="">
<div class="col-md-12 p0"><strong style="color: #1198BF; cursor: pointer;"><?php echo min_val($book_name,40);?></strong></div>
<div class="col-md-6 mt10" style="font-size: 13px;color: #777;margin-right: 30px;padding: 0;">
<p>2 dostun - 500 nəfər buradadır</p>
</div>
<div class="join " style="margin-top: 10px;float: left;">
<button name="btn_book" class="suggested_join_book" style="font-size: 12px; border-color: #ccc; outline: none; border-radius: 2px; padding: 5px 7px; box-shadow: 0 0 1px 1px rgba(0,0,0,.3); border: none;" data-id="<?php echo $book_id;?>">Abunə ol</button>
</div>
</div>
</div>
</div>
</div>
<div class="clb"></div>
<!-- Finish SuggestBook -->
functions.js is:
$(".suggested_join_book").on("click",function(){
var book_id = $(this).data("id");
$.ajax({
type: "post",
url : "join_book.php",
data: {"book_id":book_id},
success: function(veri){
// $("[data-target="+book_id+"]").addClass('animated fadeOut');
$("[data-target="+book_id+"]").css('display','none');
// $("#"+book_id).load("ajax.php?bol=new_book");
$.ajax({
type: 'post',
url: 'ajax.php?bol=new_book_2',
data: {"userID":'15'},
success: function(arr){
$(".suggest").append(arr);
}
});
}
});
});
ajax.php is:
case "new_book_2":
$userID = $_POST['userID'];
foreach (new_book_2($userID) as $nb) {
$book_name = $nb["ki_name"];
$ki_image = $nb["ki_image"];
$book_id = $nb["ki_id"];
if($ki_image == ""){$ki_image = 'noprofile.jpg';}
?>
<!-- Suggest book -->
<div class="book-box " id="<?php echo $book_id;?>" style="background: #fff;min-height: 83px;margin-bottom: 10px!important;bg-444" data-target="<?php echo $book_id;?>">
<?php
?>
<img src="img/<?php echo $ki_image;?>" style="width:100%; height: 222px;padding:0;border-top-left-radius: 4px;border-top-right-radius: 4px;" alt="">
<div class="container-fluid" style="">
<div class="row" style="">
<div class="caption mt5 p5" style="">
<div class="col-md-12 p0"><strong style="color: #1198BF; cursor: pointer;"><?php echo min_val($book_name,40);?></strong></div>
<div class="col-md-7 mt10" style="font-size: 13px;color: #777;margin-right: 8px;padding: 0;">
<p>2 dostun - 500 nəfər buradadır</p>
</div>
<button name="btn_book sonradan" class="btn btn-primary join_book" data-id="<?php echo $book_id;?>">Abunə ol</button>
</div>
</div>
</div>
</div>
<div class="clb"></div>
<!-- Finish SuggestBook -->
<?php
}
break;

Answer 1

May be you include functions.js before your html tags. Put your click event into the jquery's ready method:
$(document).ready(function(){
$(".suggested_join_book").on("click",function(){
var book_id = $(this).data("id");
$.ajax({
type: "post",
url : "join_book.php",
data: {"book_id":book_id},
success: function(veri){
// $("[data-target="+book_id+"]").addClass('animated fadeOut');
$("[data-target="+book_id+"]").css('display','none');
// $("#"+book_id).load("ajax.php?bol=new_book");
$.ajax({
type: 'post',
url: 'ajax.php?bol=new_book_2',
data: {"userID":'15'},
success: function(arr){
$(".suggest").append(arr);
}
});
}
});
});
});