ReAdding Event Handler After Dynamically Removing and ReAdding Element

ReAdding Event Handler After Dynamically Removing and ReAdding Element

Hello everyone,

I think the title should be pretty clear in terms of describing the issue. Basically, I'm trying to create a reset() method where I can remove then immediate readd the element and it's event handler. Right now, it removes the element (which is initially built into the HTML) and readds the element. So that works, but the original events that were tied to that element are not added. Any idea as to why? Any help is appreciated. Here is the code I have:

  1.     function resetAllOverlays()
  2.     {
  3.         var overlayBG = $("<p class=\'grid-overlay\' style=\'height:300px;\'></p>");
  4.         var overlayText = $("<p class=\'grid-block-text\'></p>");
  5.         var gridChildren = $(".grid").children();
  6.         $(gridChildren).each(function(){
  7.             // first remove all grid child elements
  8.             $(this).empty();
  9.             // then add them back
  10.             $(this).append(overlayBG);
  11.             $(this).append(overlayText);
  12.         });
  13.       // Add The Handlers Back
  14.         $("p.grid-block-text").each(function() {
  15.             $(this).on("mouseenter", function() {
  16.                 addOverlay($(this));
  17.             });
  18.         });
  19.         $("p.grid-block-text").each(function() {
  20.             $(this).on("mouseleave", function() {
  21.                 removeOverlay($(this));
  22.             });
  23.         });
  24.     }