jquery触发器在动态加载新内容后不起作用


jquery triggers dont work after dynamically loading new content

我正在制作一个使用图像的投票系统,每当你点击其中一个图像时,它就会提交该图像,然后淡出并使用php页面重新加载。问题是,第一次提交是有效的,但一旦重新加载,点击图像就什么都不会做。甚至连我测试过的警报都没有。

vote.js

$('.firstDisplay').on("click", function () {
    alert("work1");
    var win = $(this).attr("title");
    var loss = $('.secondDisplay').attr("title");
    send_vote(win, loss);
    console.log("<-CLIENT-> Click: Sent vote");
});
$('.secondDisplay').on("click", function () {
    alert("work2");
    var win = $(this).attr("title");
    var loss = $('.firstDisplay').attr("title");
    send_vote(win, loss);
    console.log("<-CLIENT-> Click: Sent vote");
});
function send_vote(win, lose) {
    var data = {'win': win, 'lose': lose};
    $.ajax({
        type: "POST",
        url: 'actions/send-vote.php',
        data: data,
        success: function (html) {
            $('#sent-vote').css('display', 'block');
            $('#sent-vote').fadeOut(2000);
            $('.imageBtn').fadeOut(2000);
            $('#imageDisplay').load("source/templates/vote.php");
            console.log("<-SYSTEM-> Ajax request sent and processed.");
        },
        error: function(e) {
            $('#fail-vote').css('display', 'block');
            $('#fail-vote').fadeOut(2000);
            console.log("<-SYSTEM-> Ajax request failed to process.");
        }
    });
}

vote.php

<?php
$maximumPersons = 95;
$firstDisplay = rand(1, $maximumPersons);
$secondDisplay = rand(1, $maximumPersons);
function getScore($photo_id) {
    $query = "SELECT *
                  FROM photo_scores
                  WHERE photo_id='".$photo_id."'";
    $result = $database->query_select($query);
    return $result;
}
?>
                    <a href="javascript:void(0);" class="imageBtn" id="firstDisplay" title="<?php echo $firstDisplay; ?>">
                        <img src="<?php echo $baseURL; ?>/images/persons/<?php echo $firstDisplay; ?>.png" />
                        <?php // $scoreFD = getScore($firstDisplay); echo "Wins: ".$scoreFD["wins"]." Losses: ".$scoreFD["losses"].""; ?>
                    </a>
                    <a href="javascript:void(0);" class="imageBtn" id="secondDisplay" title="<?php echo $secondDisplay; ?>">
                        <img src="<?php echo $baseURL; ?>/images/persons/<?php echo $secondDisplay; ?>.png" />
                        <?php // $scoreSD = getScore($secondDisplay); echo "Wins: ".$scoreSD["wins"]." Losses: ".$scoreSD["losses"].""; ?>
                    </a>

所有加载都是正确的,只是img/按钮在重新加载后不会提交/工作。

您需要使用表单$(document).on('event', '.selector', function(){});来侦听DOM上的新元素,并将处理程序附加到它们上。

这里的答案是事件委派。

将事件侦听器绑定到一个对象不会将其绑定到所有其他动态加载或创建的对象,或者将(比如您的示例中的类)添加到另一个对象也不会应用其事件侦听器,因为当脚本运行时,它们并不存在

$('.firstDisplay').on("click", function () {

您说firstDisplay类的所有当前元素都会在单击时执行某些操作。如果你添加了一个新的.firstDisplay,它不会知道它需要在点击时收听。简而言之,侦听器不是附加在类本身上,而是附加在脚本运行时具有该类的元素上。

现在,为了让它发挥作用,我们将使用事件委派

$(document).on("click",'.firstDisplay', function () {

这次我们将事件绑定到文档上。我们还告诉事件,如果它在文档中单击的元素上找到firstdisplay类,则必须执行以下函数。因此,如果添加了新元素,那么现在绑定到文档的事件将正确地触发