我有一个公告系统,我从数据库中提取所有公告,并使用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"> ');
$(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");
很好地回答了这里的类似问题