div Overlay for every div in an array cont. (sort function error)

Question

Dam I'm gonna have to ask you to help me on another error.

I have this code that sorts my list out. But what the problem is now that when we sort it out by pressing the buttons. The show/hide functions no longer work. Test it and see. For some reason it does work when you click it, but doesn't work any longer.

$(document).ready(function() { 
 sortDate_Design();
 hideOverlay();
 $( ".pagesListBtn" ).mouseenter(function() {
  $( this ).find(".pagesListOverlay").fadeIn(200);
 });
   $( ".pagesListBtn" ).mouseleave(function() {
  $( this ).find(".pagesListOverlay").fadeOut(200);
   });
});

function hideOverlay() {
 "use strict";
 $(".pagesListOverlay").fadeOut(2000);
}



var arrayVariableDesign = [
  {name: "object1", type:"type1", company:"company1", dateYear:"2017", dateMonth:"08", dateDay:"24", image:"../images/preview/noimg.png"},
  {name: "object2", type:"type1", company:"company1", dateYear:"2017", dateMonth:"01", dateDay:"20", image:"../images/preview/noimg.png"},
  {name: "object3", type:"type2", company:"company2", dateYear:"2016", dateMonth:"08", dateDay:"24", image:"../images/preview/noimg.png"},
  {name: "object4", type:"type3", company:"company3", dateYear:"2016", dateMonth:"03", dateDay:"04", image:"../images/preview/noimg.png"},
  {name: "object5", type:"type1", company:"company2", dateYear:"2017", dateMonth:"02", dateDay:"24", image:"../images/preview/noimg.png"},
  {name: "object6", type:"type2", company:"company1", dateYear:"2017", dateMonth:"08", dateDay:"20", image:"../images/preview/noimg.png"},
];
var arrayLength_Design = arrayVariableDesign.length;
var temp_Design;
    
function displayDesign() {
    
  for (i = 0; i < arrayLength_Design; i++) { 
    var sortDate_Design = arrayVariableDesign[i].dateYear + arrayVariableDesign[i].dateMonth + arrayVariableDesign[i].dateDay;
    temp_Design = document.createElement('div');
    temp_Design.className = 'pagesListBtn mobilePagesListBtn';
    temp_Design.style.background = "url(" + arrayVariableDesign[i].image.src + ")"; // https://stackoverflow.com/questions/9790347/set-an-image-object-as-a-div-background-image-using-javascript
    temp_Design.style.backgroundSize = "100%";
    temp_Design.style.backgroundRepeat = "no-repeat";
    temp_Design.style.backgroundPosition = "50% 50%";
    temp_Design.style.backgroundColor = "#C02024";
    temp_Design.innerHTML = "<div class='pagesListOverlay mobilePagesListOverlayBtn'>" + arrayVariableDesign[i].name + " for " + arrayVariableDesign[i].company + "<br>" + arrayVariableDesign[i].type + "<br>" + arrayVariableDesign[i].dateDay + "/" + arrayVariableDesign[i].dateMonth + "/" + arrayVariableDesign[i].dateYear + "</div>";
    document.getElementById("demo").appendChild(temp_Design);
  }
}

function sortName_Design() {
 "use strict";
     arrayVariableDesign.sort(function(a, b){
     var x = a.name.toLowerCase();
     var y = b.name.toLowerCase();
     if (x < y) {return -1;}
     if (x > y) {return 1;}
   return 0;
  });
 $('.pagesListBtn').remove();
    displayDesign();
 hideOverlay();
}  
    
function sortType_Design() {
 "use strict";
     arrayVariableDesign.sort(function(a, b){
     var x = a.type.toLowerCase();
     var y = b.type.toLowerCase();
     if (x < y) {return -1;}
     if (x > y) {return 1;}
   return 0;
  });
 $('.pagesListBtn').remove();
    displayDesign();
 hideOverlay();
}
function sortCompany_Design() {
 "use strict";
     arrayVariableDesign.sort(function(a, b){
     var x = a.company.toLowerCase();
     var y = b.company.toLowerCase();
     if (x < y) {return -1;}
     if (x > y) {return 1;}
   return 0;
  });
 $('.pagesListBtn').remove();
    displayDesign();
 hideOverlay();
}
function sortDate_Design() {
 "use strict";
     arrayVariableDesign.sort(function(a, b){
     var x = a.dateYear.toLowerCase() + a.dateMonth.toLowerCase() + a.dateDay.toLowerCase();
     var y = b.dateYear.toLowerCase() + a.dateMonth.toLowerCase() + a.dateDay.toLowerCase();
     if (x < y) {return -1;}
     if (x > y) {return 1;}
   return 0;
  });
 $('.pagesListBtn').remove();
    displayDesign();
 hideOverlay();
}
 

.pagesListBtn {
  /*z-index: 500;*/
  background-color: #C02024;  
  /*display: inline-block;*/
  display:block;
}

.pagesListBtn:hover {
  background-color: #920400;    
}

.pagesListOverlay {
  padding: 0;   /* changed */
  margin: 0;    /* changed */
  height: 150px;    /* added */
  opacity: 0.8;
  display: inherit;
  background-color: white; 
  text-align: center;
  vertical-align: bottom;
  text-decoration:none;
  font-weight:900;
  line-height:30px;
}

.mobilePagesListBtn {
  height: 150px;      /* added */
  /*min-height:150px; 
  max-height:150px;*/
  width: 100%; /*295px*/
  padding: 0;
  margin-top: 25px;
  /*margin-bottom: -15px;*/
}

.mobilePagesListOverlayBtn {
  /*min-height:150px;
  max-height:150px;*/
  padding:0;    /* added */
  height: 150px;
  width: 100%; /*295px*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<button onclick="sortName_Design()">Sort By Name</button>
    <button onclick="sortType_Design()">Sort By Type</button>
    <button onclick="sortCompany_Design()">Sort By Comapny</button>
    <button onclick="sortDate_Design()">Sort By Date</button>
<div id="demo"></div>

Answer 1

When you sort the divs... You kind of remove all the divs and recreates them using displayDesign().

That is correct, but the event handlers were attached to the removed elements. You have to re-bind functions for the mouseenter and mouseleave events to the new elements.

An easy way (At least, it is easy! When you know the cause of the problem...) is to make the handler setting in a named function and call it each time you re-use displayDesign().

function setMouseHandlers(){
  $( ".pagesListBtn" ).mouseenter(function() {
    $( this ).find(".pagesListOverlay").fadeIn(200);
  });
  $( ".pagesListBtn" ).mouseleave(function() {
    $( this ).find(".pagesListOverlay").fadeOut(200);
  });
}

Then call it!

function sortDate_Design() {
  "use strict";
  arrayVariableDesign.sort(function(a, b){
    var x = a.dateYear.toLowerCase() + a.dateMonth.toLowerCase() + a.dateDay.toLowerCase();
    var y = b.dateYear.toLowerCase() + a.dateMonth.toLowerCase() + a.dateDay.toLowerCase();
    if (x < y) {return -1;}
    if (x > y) {return 1;}
    return 0;
  });
  $('.pagesListBtn').remove();
  displayDesign();
  hideOverlay();
  setMouseHandlers();   // <-- Handlers are setted here!
}

Notice that those 3 functions, displayDesign(),hideOverlay() and setMouseHandlers(), could be merged into only one...

Here is a CodePen were this works fine for all your sortings.
;)

---

Another way would be to use event delegation.

$( "#demo" ).on("mouseenter", ".pagesListBtn", function() {
  $( this ).find(".pagesListOverlay").fadeIn(200);
});
$( "#demo" ).on("mouseleave", ".pagesListBtn", function() {
  $( this ).find(".pagesListOverlay").fadeOut(200);
});

That technique attaches the functions to #demo wich is "delegated" to handle the events occuring on its child named in the second argument.

Read more on delegation here.

Answer 2

Your error may be simpler than you may think. You it probably has to to with the fact that you are creating dynamic element and then you have mouse events that are reliant on those elements. When the elements are initially created the mouse events are attached to them, when they are removed and later recreated, the mouse event is not reattached. jQuery's "on" function is best to handle dynamically created elements. Also instead of targeting your parent element and then finding the "pagesListOverlay" class, you can just target the class. However, I don't know why your HTML looks like so this is a guess. If targeting that parent is part of your requirements then I can show that as well.

$( ".pagesListOverlay" ).on("mouseenter", function() {
    $( this ).fadeIn(200);
});
$( ".pagesListOverlay" ).on("mouseleave", function() {
    $( this ).fadeOut(200);
});

This may also work and is shorter.

$( ".pagesListOverlay" ).on("mouseenter", function() {
    $( this ).fadeIn(200);
}).mouseleave( function() {
    $( this ).fadeOut(200);
});