2
I am creating a site posts that will be updated by ajax, but when you add one more post the side menu does not work. How to upgrade without making the menu stop?
This is the code I’m using, I put a button on the side to simulate the ajax updating the posts, but after adding another post the menu does not work.
var lower = document.querySelectorAll(".context-btn"),
context = document.querySelectorAll(".context-menu");
let lowerLength = lower.length;
for (let i = 0; i < lowerLength; i++) {
onLowerClick(lower[i], i);
}
document.addEventListener("click", hideContextMenu, false);
function onLowerClick(elemt, num) {
elemt.addEventListener("click", function() {
event.stopPropagation();
showContextMenu(this, num);
});
}
function showContextMenu(elemt, menu) {
hideContextMenu(menu);
elemt.nextElementSibling.classList.toggle('context-menu--visible');
}
function hideContextMenu(save) {
let contextLength = context.length;
for (let i = 0; i < contextLength; i++) {
if (save != i) context[i].classList.remove("context-menu--visible");
}
}
var corpo = '<div id="base"> <div class="nav"> <div class="context-container">';
corpo += '<button class="context-btn"> <i class="material-icons">more_vert</i> </button>';
corpo += '<div class="context-menu"> <ul class="context-list"><li class="context-menu-item">Edit this Post</li><li class="context-menu-item">Alert this Post</li><li class="context-menu-item">Delete thid Post</li> </ul> </div>';
corpo += '</div></div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore repudiandae, cum placeat minima. Aliquam natus mollitia, alias fugiat ea provident debitis eius reprehenderit, illum dolorem at fuga in tempora fugit.</div';
function add(){
document.getElementById('corpo').innerHTML += corpo;
}
*{margin: 0; padding: 0;}
*:focus{outline:none;}
body{ background-color: #e3e3e3; font-family: 'Roboto', sans-serif;}
#base{ width: 50%; height: auto; min-height: 200px; margin: 15px auto;}
.nav{
width: 100%; height: 50px;
padding: 10px;
box-sizing: border-box;
background-color: #3F51B5;
border-radius: 3px;
text-align: right;
}
.context-container{ position: relative; }
.context-btn{
width: 27px;
border: none;
background-color: #3F51B5;
border-radius: 50%;
color: #fff;
}
.context-btn:hover{ background-color: #5260b0;}
.context-btn:active{ background-color: #646fab;}
.context-menu{
visibility: hidden;
position: absolute;
right: 10px;
z-index: 1;
-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
-webkit-transition: transform .3s cubic-bezier(.4,0,.2,1);
-o-transition: transform .3s cubic-bezier(.4,0,.2,1);
transition: transform .3s cubic-bezier(.4,0,.2,1);
-webkit-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
-o-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.context-menu--visible{
visibility: visible;
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.context-list{
width: auto; height: auto;
padding: 8px 0;
background: #fff;
border-radius: 3px;
text-align: left;
}
.context-menu-item{
display: block;
position: relative;
list-style: none;
padding: 0 16px;
font-size: 14px;
line-height: 46px;
color: #757575;
}
.context-menu-item:hover{ background: #eee;}
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<button onclick="add();">add</button>
<div id="corpo">
<div id="base">
<div class="nav">
<div class="context-container">
<button class="context-btn">
<i class="material-icons">more_vert</i>
</button>
<div class="context-menu">
<ul class="context-list">
<li class="context-menu-item">Edit this Post</li>
<li class="context-menu-item">Alert this Post</li>
<li class="context-menu-item">Delete thid Post</li>
</ul>
</div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore repudiandae, cum placeat minima. Aliquam natus mollitia, alias fugiat ea provident debitis eius reprehenderit, illum dolorem at fuga in tempora fugit.
</div>
</div>
I’m still pretty new, but I suggested you use the property
onclick="myFunction(postID)"
from the button to call the menu function, and you could put aid
different for each generated post (1,2,3...) <button class="context-btn" id="postid"> and use it in the menu function for whatever you need.– ihavenokia
@ihavenokia I thought about it but as it will be a dynamic system would be half unfeasible!
– Victor M.