div Superposition pour chaque div dans un tableau cont. (erreur de fonction de tri)

Question

Dam Je vais devoir vous demander de m'aider pour une autre erreur.

J'ai ce code qui trie ma liste. Mais quel est le problème maintenant que lorsque nous trions en appuyant sur les boutons. Les fonctions show/hide ne fonctionnent plus. Testez-le et voyez. Pour une raison quelconque, cela fonctionne lorsque vous cliquez dessus, mais ne fonctionne plus.

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

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

.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> 
 
    \t <button onclick="sortType_Design()">Sort By Type</button> 
 
    \t <button onclick="sortCompany_Design()">Sort By Comapny</button> 
 
    \t <button onclick="sortDate_Design()">Sort By Date</button> 
 
<div id="demo"></div>

Answer 1

Lorsque vous triez les divs ... Vous supprimez tous les types de divs et les reconstitue à l'aide displayDesign().

Cela est correct, mais les gestionnaires d'événements ont été attachés aux éléments supprimés. Vous devez relier les fonctions des événements mouseenter et mouseleave aux nouveaux éléments.

Un moyen facile (au moins, il est facile! Lorsque vous connaissez la cause du problème ...) est de rendre le gestionnaire mise en fonction du nom et de l'appeler chaque fois que vous réutilisez displayDesign().

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

Alors appelez-le!

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! 
} 

Notez que ces 3 fonctions, displayDesign(), hideOverlay() et setMouseHandlers(), pourraient être fusionnés en une seule ...

Voici un CodePen étaient cela fonctionne très bien pour tous vos triages.
;)

---

Une autre façon serait d'utiliser la délégation d'événements.

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

Cette technique attache les fonctions à #demo Wich est « délégué » pour gérer les événements ayant lieu sur son enfant nommé dans le deuxième argument.

En savoir plus sur la délégation here.

Answer 2

Votre erreur est peut-être plus simple que vous ne le pensez. Vous devez probablement le faire avec le fait que vous créez un élément dynamique et que vous avez des événements souris qui dépendent de ces éléments. Lorsque les éléments sont créés initialement, les événements de la souris leur sont attachés. Lorsqu'ils sont supprimés et recréés ultérieurement, l'événement de la souris n'est pas rattaché de nouveau. La fonction "on" de jQuery est la meilleure pour gérer les éléments créés dynamiquement. Aussi, au lieu de cibler votre élément parent et ensuite de trouver la classe "pagesListOverlay", vous pouvez simplement cibler la classe. Cependant, je ne sais pas pourquoi votre HTML ressemble à ceci, c'est une supposition. Si le ciblage de ce parent fait partie de vos besoins, je peux le montrer également.

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

Ceci peut également fonctionner et est plus court.

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