何らかの理由で、動的に追加されたエレメントにmouseenterイベントを追加するには、何らかの理由で、ネイティブJS

Question

のjQueryの代わりにネイティブJSを使用する必要があります。私は動的に追加された要素にイベントを追加する必要があります。私はjQueryでそれをやったが、ネイティブJSとはできない。ここで

は私はJS

document.querySelector('body').addEventListener('mouseenter', function(){ 
    var forgotPasslink = document.getElementsByClassname('password_link'); 
    if(e.target == forgotPasslink[0]){ 
     ... 
    } 
}); 

と試みたが、それは動作していない何jQueryの

ここ

$('body').on('mouseenter', '.password_link', function(){ 
... 
}); 

と私のコードです。私はgoogleにしようとしたが、成功しなかった。

Answer 1

使用mouseoverを動作するはずmouseoverを使用する必要があります： -

document.addEventListener('mouseover', function (e) { 
 
    if ((e.target.className =='test')) { 
 
     console.log("Got here"); 
 
    } else { 
 
     // do nothing. 
 
    } 
 
}, false);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<div class="test"> 
 
    Sample Test 
 
    </div>

Answer 2

あなたは、これは例えば

document.addEventListener('mouseover', function (e) { 
    if (hasClass(e.target, 'password_link')) { 

     //your code 
    } else { 

     // your code 
    } 
}, false); 

Answer 3

は次のように行い、

var item = document.getElementsByTagName("BODY")[0]; 
    item.addEventListener("mouseover", func, false); 
    item.addEventListener("mouseout", func1, false); 

    //mouse enter 
    function func() 
    { var forgotPasslink = document.getElementsByClassname('password_link'); 
     if(e.target == forgotPasslink[0]){ 
      //your code 
     } 
    } 

    //mouse leave 

    function func1() 
    { 
    //your code 
    } 

Answer 4

さてあなたは、静的なコンテンツでこれを使用している場合は、私がいないあなたがこれを使用CAND AJAXロードされたコンテンツの上に、意味：

var elements = var x = document.getElementsByClassName("password_link"); 
    if(elements.length>0){ 
     for(var i =0; i< elements.length; i++){ 
      elements[i].addEventListener('mouseover', function(element){ 
       //And Here is where you magic Code goes! 
      }); 
     } 
    } 

お楽しみください！