Question

在实施＆＃34;显示更多按钮＆＃34;

时，我遇到了问题

该页面最初将显示5行数据，然后单击该按钮将通过ajax调用php函数并加载更多结果，最终在页面上显示它们。它做得非常好。

问题是每个div都可以单独点击以允许用户交互。在单击按钮之前，前5个按钮可以正常工作，但是在加载前10个之后，前5个变为不可点击，其余5个按预期工作。

请在此处查看我的代码：

HTML：

<div class="col-sm-12 col-xs-12 text-center pushDown">
    <div id="initDisplay">
        <?php
            // Display all subjects
            echo displaySubjects($limit);
        ?>
    </div>

    <div id="show_result"></div>
    <button id="show_more" class="text-center pushDown btn btn-success">Show More</button>
</div>

点击按钮后会发生以下情况： JQuery的：

<script>
    $("#show_more").on("click", function() {
        $("#initDisplay").fadeOut();
    });

    /* This bit is irrelevant for this question
    $("#addBtn").on("click", function(){
        addSubject();
    });
    */

    var stag = 5;

    $("#show_more").on("click", function(){
        stag+=5;

        console.log(stag);

        $.ajax({
            dataType: "HTML",
            type: "GET",
            url: "../ajax/admin/loadSubjects.php?show="+stag,
            success: function(result){
                $("#show_result").html(result);
                $("#show_result").slideDown();
            }
        });

        var totalUsers = "<?php echo $total; ?>";

        if(stag > totalUsers) {
            $("#show_more").fadeOut();
        }
    });
</script>

我的PHP页面和功能在这里：

<?php

include_once '../../functions/linkAll.inc.php';

$limit = filter_input(INPUT_GET, "show");

if (isset($limit)) {
    echo displayUsers($limit);
} else {
    header("Location: ../../dashboard");
}

function displaySubjects($limit) {
    $connect = db();
    $stmt = $connect->prepare("SELECT * FROM Courses LIMIT $limit");

    $result = "";

    if ($stmt->execute()) {
        $results = $stmt->get_result();

        while($row = $results->fetch_assoc()){
            $id = $row['ID'];
            $name = $row['Name'];
            $image = $row['image'];

            if($image === ""){
                $image = "subjectPlaceholder.png"; // fail safe for older accounts with no images
            }

            $result .=
            "
                <div class='img-container' id='editSubject-$id'>               
                    <img class='miniProfileImage' src='../images/subjects/$image'>
                    <div class='middle' id='editSubject-$id'><p class='middleText'>$name</p></div>
                </div>
            ";

            $result .= "<script>editSubjectRequest($id)</script>";

        }
    }

    $stmt->close();
    return $result;
}

通过此调用的脚本是：

function editSubjectRequest(id) {
    $("#editSubject-"+id).click(function(e) {
        e.preventDefault(); // Prevent HREF

        console.log("You clicked on " + id);

        $("#spinner").show(); // Show spinner
        $(".dashContent").html(""); // Empty content container

        setTimeout(function() {
            $.ajax({ // Perform Ajax function
                url: "../ajax/admin/editSubjects.php?subjectID="+id,
                dataType: "HTML",
                type: "POST",
                success: function (result) {
                    $("#spinner").hide();
                    $(".dashContent").html(result);
                }
            });
        }, 1500); // Delay this for 1.5secs
    }); 
}

然后，这将根据用户点击的主题将用户带到特定页面。

Answer 1

当您动态更新DOM时，您需要在动态添加的元素上绑定click事件。要实现此目的，请从

更改脚本

 $("#editSubject-"+id).click(function(e) {

要

 $(document).on("click","#editSubject-"+id,function(e) {

这将绑定每个div上的click事件，包括动态添加的div。

Answer 2

您的问题是重复的ID。总共有五个项目出现在页面上。但是当你加载更多时，你加载的不是新项目，而是所有项目，包括前五项。由于它们已经出现在页面上，因此它们的副本不可单击。然而，原始项目是可点击的，但它们是隐藏的。

以下是您的需求：

$("#show_more").on("click", function(){
  $("#initDisplay").html("");
});

不要只fadeOut确保删除该内容。

这是用最少的更改解决问题的最简单方法。但更好的选择是重写你的php，所以它只会加载新项目（使用WHERE id > $idOfLastItem条件）。

此外，您不需要将该脚本附加到每个div。一次为所有div使用公共处理程序。

$("body").on("click", "div.img-container", function() {
  var id = $(this).attr("id").split("-")[1];
});

在点击加载更多按钮期间，一些div变得无法点击

2 个答案: