使用純JavaScript將事件處理程序附加到使用類動態創建的元素上

Question

我構建了一個將事件處理程序附加到類的函數。 它與頁面加載期間DOM中已經存在的元素配合使用很好，但是在頁面加載后動態添加到DOM的元素上靜默失敗。 我感謝任何建議。 下面的代碼是我正在開發的名為launchjs https://github.com/bytewarestudios/launchjs的JavaScript庫的一部分。 建議的其他解決方案僅指向我已經知道如何使用的JQuery代碼，並且需要沒有JQuery的JavaScript解決方案。

我相信有一種解決方案與我在動態綁定元素上進行事件綁定時所需要的解決方案接近嗎？ 由Ram swaroop提供，但我不認為這是我將事件附加到動態創建的元素時遇到的根本問題，它不能像本頁上可接受的答案那樣詳盡地解釋它。

代碼的最終結果應允許用戶使用以下代碼結構將事件附加到具有類的元素上。

l(".className").on("click",function(event){

//do something here

});

JavaScript：

/*
  The type parameter passed in to this function is "click" and the 
  selector variable value equals .view
  Note: the isClass function returns true if the selector value is prefixed
 with a .
 */

this.on = function(type,fn){//begin on function


    //store the events
    var events = ["click","mouseover","mouseout","submit","dblclick"];


    //if the event array contains the event and the selector is not a class
    if(events.indexOf(type) !== -1 && !isClass()){//begin if then  


   //add the event listenter to the document
   document.addEventListener(type,function(event){//begin function           

           /*
            if the event listener target id equals the selector id passed to the launch
           function and the selectors doesn't contain the . prefix or class prefix.
             */
    if(event.target.id === selector){//begin if then      




              //call the function passed in as a parameter, pass the event so it can be used.
              fn(event);              


           }//end if then

      });//end function    

    }//end if then


    //if the event array contains the event and the selector is a class
    if(events.indexOf(type) !== -1 && isClass()){//begin if then  





            //store the collection of classes
            var classes = document.getElementsByClassName(selector.split(".")[1]);     

        //loop through the classes and add the event listeners
        for(var i = 0; i < classes.length; i++){

            classes[i].addEventListener(type,function(event){//begin addEventListener function        

           //add functionality for classes
           if(event.target.className === selector.split(".")[1] && isClass()){//begin if then  



              //call the function passed in as a parameter,pass the event so it can be used.
              fn(event);

           }//end if then

            });//end addEventListener function

   }//end for loop

        }//end if then         


    };//end on function  

Answer 1

您要么在每次添加新元素時都需要運行此代碼，同時確保您沒有將事件偵聽器兩次附加到舊元素，或者可以使用委托事件的技術，例如jQuery中的.on（） 。 。

簡而言之，您將事件偵聽器附加到全局容器，然后檢查單擊的元素是否有指定的類。 這是有關此概念的文章： 沒有jQuery的DOM事件委托

還有一個由同一個人針對特定情況編寫的庫： https : //github.com/ftlabs/ftdomdelegate

請看我關於這個概念的簡短例子：

 var area = document.getElementsByClassName('clickable-area')[0]; area.onclick = function(e) { if (e.target.className === 'add-children') { var button = document.createElement('button'); button.className = 'child-button'; button.innerText = 'Child button'; area.appendChild(button); } else if (e.target.className === 'child-button') { e.target.innerText = 'Dynamically added child is clicked'; } } 

 html, body { width: 100%; height: 100%; padding: 0; margin: 0; } .clickable-area { display: block; cursor: pointer; background: #eee; width: 100%; height: 100%; } 

 <div class="clickable-area"> <button class="add-children">Add children</button> </div>