JavaScript未在PHP加载的HTML上运行


JavaScript Not Running On PHP Loaded HTML

我有一个公告系统,我从数据库中提取所有公告,并使用Ajax和PHP在屏幕上显示它们。

以下是将每个公告加载到页面上的代码:

echo '<div id="announcements_container">';
for ($i = $start; $i <= $end; $i++) {
    ?>
        <script>
            formatAnnouncement("<?php echo $announcements[$i]->id; ", ..., ..., ...);
        </script>
    <?php
}
echo '</div>';

下面是我的函数,它将接收到的数据发送到PHP并返回格式化的公告。

function formatAnnouncement(id, subject, body, urgent, attachment1, attachment2, poster, time_posted) {
    $.ajax({
        type: "POST",
        url: "<?php echo base_url().'application/views/user/announcement_block.php'; ?>",
        data: {id : id, subject : subject, body : body, urgent : urgent, attachment1 : attachment1, attachment2 : attachment2, poster : poster, time_posted : time_posted},
        success: function(response) {
            $("#announcements_container").prepend(response);
        }
    });
}

这成功地返回并格式化了名为<div class="announcement_block"></div>的周围div中的数据,但问题是,我对该元素的JavaScript引用不起作用。

换句话说,

$(window).load(function () {
    $(".announcement_block").hover(
              function() {
                console.log("Did it work?");
      $(this).find(".announcement_actions").find(".action_edit").append('<input type="button" onclick="updateAnnouncement($(this).parent().parent())" class="btn btn-info btn-lg" style="font-size: 10pt; width: 2em; padding: 0px; padding-top:5px;" value="Edit">&nbsp;&nbsp;');
                    $(this).find(".announcement_actions").find(".action_delete").append('<input type="submit" class="btn btn-info btn-lg" style="font-size: 10pt; background-color: #EB5F6B; width: 2.5em; padding: 0px; padding-top:5px;" value="Delete">');
              }, function() {
                $(this).find(".announcement_actions").find(".action_edit").empty();
                $(this).find(".announcement_actions").find(".action_delete").empty();
              }
            );
});

那块代码不起作用。当HTML正好加载在for循环中时,它就可以工作了。但是现在它不再是通过Ajax加载的了。

每当我将鼠标悬停在块上时,都不会运行任何代码,因为console.log从不输出。

有人能帮我吗?谢谢

试试这个:

$(document).on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
}, ".selector");

很好地回答了这里的类似问题

相关文章: