I'm creating a posts system that will be updated by ajax, however when I add another post the side menu does not work. How to update without making the menu stop?
This is the code I'm using, put a button next to it to simulate ajax updating post, 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>