onmouseenter事件偵聽器不適用於動態創建的html元素

Question

動態創建的元素上的onmouseenter事件不起作用。它表明showOverlay（）未定義。 的index.html
。 。 。

 <div class="container-fluid">
  <div class="navigation-control"><ul></ul></div>
  <div class="heading">
    <h2></h2>
  </div>
  <div class="filters d-flex justify-content-end"></div>
    <div class="container-wallpapers">
     <div class="col-wallpaper"></div>
     <div class="col-wallpaper"></div>
     <div class="col-wallpaper"></div>
     <div class="col-wallpaper"></div>
     <div class="loading-wallpapers">
       <h4>LOADING WALLPAPERS</h4>
     </div>
    </div>
    <div class="scroll-toolbar" hidden>
      <div class="logo-toolbar">
        <h6><span>W</span>all<span>Truder</span></h6>
      </div>
        <ul>
          <li class="scroll-toolbar-gototop">
            <i class="material-icons">arrow_upward</i>
            <h6>Top</h6>
          </li>
        </ul>
    </div>
</div>
 <script src="assets/js/binder.js" type="module"></script>
 </body>
 </html>

binder.js

這是在調用元素時創建元素的函數。

       function createContainerWallpaper(src, username, usernameLink, 
           source, 
       sourceUrl){
        let containerWallpaper = document.createElement("div");
       containerWallpaper.setAttribute("class", "container-wallpaper");
       containerWallpaper.innerHTML = `<div class="main-wallpaper" 
       onmouseenter="showOverlay(event)">
           <img src="${src}"/>
           <div class="wallpaper-overlap">
             <div>
               <a href="${sourceUrl}" target="_blank">${source}</a>
               <a href="${usernameLink}" target="_blank">${username}</a>
             </div>
           </div>
         </div>`;
       return containerWallpaper;
       }

onmouseenter事件偵聽器

function showOverlay(event){
       console.log(event.target);
        }

我還通過在使用window.onload函數加載元素后設置事件偵聽器來進行嘗試，但是它沒有用。 請在這里幫我

Answer 1

您還可以創建div ，該div將使用document.createElement偵聽mouseenter事件，並為其分配事件偵聽器，然后再執行innerHTML 。

基本示例：

 function showOverlay() { alert('Showing...'); } const $demo = document.querySelector('#demo'); const $insertedDiv = document.createElement('div'); $insertedDiv.setAttribute('id', 'inserted'); $insertedDiv.addEventListener('mouseenter', showOverlay); $insertedDiv.innerHTML = '<span class="white">Appended with innerHTML</span>' $demo.appendChild($insertedDiv); 

 #demo { width: 500px; height: 300px; background: #CCC; } #inserted { width: 100px; height: 100px; background: #000; margin: auto; } .white { color: #FFF; } 

 <div id="demo"></div>