JavaScript Not Running On PHP Loaded HTML

Question

I have an announcements system where I pull all the announcements from a database and display them on the screen using Ajax and PHP.

Here is the code to load each announcement onto the page:

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

Here is my function that sends the received data to PHP and gets back the formatted announcement.

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);
        }
    });
}

This successfully returns and formats the data in a surrounding div called <div class="announcement_block"></div>, however the problem is, that my JavaScript reference to this element does not work.

In other words,

$(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();
              }
            );
});

That block of code does not work. It used to work when the HTML was loaded right inside the for loop. But it no longer does now that it is loaded via Ajax.

Whenever I hover over the blocks none of the code runs, because the console.log never outputs.

Can anybody help me out? Thanks.

Answer 1

Try this :

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

Good answer to similar question here