Error when using Hover function of new Elements added by JavaScript-CodePudding

I need to add new divs when I click on the ( Add Element) button, where this button will add new divs to each new click.

Elements with a ('.zone div') need to execute the hover function, but this does not happen, the function does not work on new elements added by the ( Add Element) button.

Obs. I can't just use CSS class, I need the hover function to work through javascript.

How do I solve this question, so that every new div created by the button ( Add Element) can work with the hover function?

function addElemnt(){
        var div = document.createElement('div');
        div.innerHTML = 'Hi there - Element!';
        div.className = 'box m-2';
 
        document.querySelector('.zone').appendChild(div);
        
       }

       let hover = document.querySelectorAll('.zone div');

        for (let elem of hover) {
        elem.addEventListener('mouseenter', () => {
            elem.style.backgroundColor = 'red'
        })
        elem.addEventListener('mouseleave', () => {
            elem.style.backgroundColor = ''
        })
        };

        .box, .zone{
            transition: .4s;
        }
        .zone{
            padding: 16px;
            background: #bdbdbd21;
            min-width: 282px;
            min-height: 200px;
        }
        .box{
            cursor: move !important;   
            padding: 16px;
            box-shadow: 0 2px 2px -1px #a0a0a0cc;
            width: 250px;
            margin-bottom: 10px;
            border-radius: 4px;
            font-weight: 600;
            font-size: 18px;
            background-color: #FFF;
        }
        .status{
            width: 30px;
            height: 8PX;
            background: gray;
            margin-bottom: 16px;
            border-radius: 8px;
        }
        .status.red{
            background: red;
        }

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  </head>
  <body>

    <h1>Hello!</h1>


    <div >
        <div >
          <div  style="background-color: silver;">
            
            <a  onclick="addElemnt()" role="button">  Add Element</a>   

            
           

          </div>
          <div >
            <div >Hi there - 01!</div>
            <div >Hi there - 02!</div>

            
          </div>
        </div>
      </div>

   

  </body>
</html>

CodePudding user response：

You can use event delegation on the .zone element.

let zone = document.querySelector('.zone');
zone.addEventListener('mouseenter', e => {
  if (e.target.matches('.box')) e.target.style.backgroundColor = 'red';
}, true);
zone.addEventListener('mouseleave', e => {
  if (e.target.matches('.box')) e.target.style.backgroundColor = '';
}, true);

function addElemnt() {
  var div = document.createElement('div');
  div.innerHTML = 'Hi there - Element!';
  div.className = 'box m-2';
  document.querySelector('.zone').appendChild(div);
}
let zone = document.querySelector('.zone');
zone.addEventListener('mouseenter', e => {
  if (e.target.matches('.box')) e.target.style.backgroundColor = 'red';
}, true);
zone.addEventListener('mouseleave', e => {
  if (e.target.matches('.box')) e.target.style.backgroundColor = '';
}, true);

.box,.zone{padding:16px;transition:.4s}.zone{background:#bdbdbd21;min-width:282px;min-height:200px}.box{cursor:move!important;box-shadow:0 2px 2px -1px #a0a0a0cc;width:250px;margin-bottom:10px;border-radius:4px;font-weight:600;font-size:18px;background-color:#fff}.status{width:30px;height:8PX;background:gray;margin-bottom:16px;border-radius:8px}.status.red{background:red}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<h1>Hello!</h1>
<div >
  <div >
    <div  style="background-color: silver;">
      <a  onclick="addElemnt()" role="button">  Add Element</a>
    </div>
    <div >
      <div >Hi there - 01!</div>
      <div >Hi there - 02!</div>
    </div>
  </div>
</div>