Question

我想制作类似系统，系统向用户推荐书籍，使用JQuery和用户喜欢它。

首先，在index.php有2本建议书。而且没有问题。用户可以单击Like按钮。新书上传了喜欢的书。但用户无法单击该按钮。该页面无法连接functions.js页面。

我的代码是：

在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是：

$(".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是：

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

可能是你的html标签之前包含functions.js。将您的click事件放入jquery的ready方法：

$(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);
            }
        });   
    }
  });

});
});

随后上传的按钮不起作用

1 个答案: