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

我正在制作一个使用图像的投票系统，当您单击其中一个图像时，它将提交该图像，然后淡出并使用php页面重新加载。问题是，第一次提交作品，但一旦它重新加载，点击图像什么也不做。甚至没有我测试过的警报。jquery触发器在动态加载新内容后不工作

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 /按钮不会其重装上阵后提交/工作。

来源

2015-11-14 Joel Evans

我没有看到您重新绑定到任何地方 –

如果您要替换旧的元素，请在AJAX之后单击处理程序以添加新元素，你必须重新附加你的点击处理程序。根据你的jQuery版本，你可以使用'.on（）'或'.delegate（）'。 –

@AlexW使用我相信的最新版本。我将如何重新附加我的点击处理程序？非常新的JS –

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

来源

2015-11-14 00:22:45 doublesharp

这里的答案是事件代表团。

将事件侦听器绑定到对象不会将其绑定到所有其他动态加载或创建的对象，或者将（允许在您的示例中说类作为其他对象）添加到另一个对象将不应用其事件侦听器，因为它们没有当运行脚本

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

你说有firstDisplay类的所有潮流元素做一些点击存在。如果你再添加一个新的.firstDisplay，它不会知道它需要听取点击。简而言之，侦听器不会附加在类本身上，而是附加在脚本运行时具有该类的元素上。

现在得到它的工作，我们将使用事件代表团

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

这次我们绑定事件的文件。我们还告诉事件，如果它在文档内部单击的元素上找到firstdisplay类，则必须执行以下函数。因此，如果添加了新元素，现在绑定到文档的事件将会正确激活

来源

2015-11-14 01:01:02 Elentriel

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

回答

相关问题