Consecutive mouseenter functions do not work

Question

My code is the following

$("#hammock").mouseenter(function(){

     $("#changingtext").replaceWith("<p>My text goes here</p>")

     $("#changingtitle").replaceWith("<h2>Making The Site Easy to Use</h2>")
});





$("#pointer").mouseenter(function(){

    $("#changingtext").replaceWith("<p>my text goes here</p>")

    $("#changingtitle").replaceWith("<h2>Do Not Click The Wrong Button</h2>")
});

If I hover over #hammock it will work but if I then go to #pointer nothing changes. Though if reloading the page, #pointer will work if I mouseover it first.

How do I get it so that after hovering over #hammock I can hover over #pointer and it will change the text?

Answer 1

This:

$('#changingtext').replaceWith("<p>my text goes here</p>");

completely obliterates the element formerly known as "changingtext". Subsequently, your attempts to locate it and update the text will fail.

However, you can replace it with content that shares its "id":

$('#changingtext').replaceWith("<p id=changingtext>my text goes here</p>");

It's always a good idea to do some experimentation with your code, either by taking advantage of the browser debugger or by simply adding console.log() calls to your code. In this case that would have shown you that your "mouseenter" handlers are indeed both working.