How do I interact with HTML created with javascript?

Asked

Viewed 904 times

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>

javascript html ajax

  • 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 a id 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 I thought about it but as it will be a dynamic system would be half unfeasible!

1 answer

1


The main problem is this code snippet:

document.getElementById('corpo').innerHTML += corpo;

This form causes you to lose the events attached to your elements (roughly speaking). Instead use methods such as:

elemento.appendChild(filho);

Or with Jquery:

$('#elemento').append(filho);

There are other problems with the above code, but now I’m running out of time for more details. I leave you with the fix I did. vlw.

http://codepen.io/renatocolaco/pen/JEGJPa

More information about appendchild vs innerHTML Create HTML element with Javascript (appendchild vs innerHTML)

  • further information: http://answall.com/questions/120708/cria-elemento-no-html-com-javascript-appendchild-vs-innerhtml

  • I am using pure js, and put what you said, gave some errors but now adds, however only the first post works the menu, the others that are added no!

  • I just made a test and saw that the error is time to assign the click to the button, because only recognizes the initials of the start of the count, I will have to reload the count variable every time I add a new post!

  • See in the example I left how I do the attribution of the click event. $('body'). click ('click','.context-btn',work()) ... That way you don’t need to do any more counting. And if the answer was helpful, don’t forget to mark as answered. Vlw.

  • It’s just that I use pure js, and I’m not getting from jquery to pure code!

Browser other questions tagged javascript html ajax

You are not signed in. Login or sign up in order to post.