jQuery .on委派的mouseenter mouseleave不起作用

Question

它可以在第一個動態創建的鏈接上工作，但它不會在其他鏈接上工作。此外，彈出信息在由於某種原因而懸停之前已經顯示。這是我有：

<div id="parent"> 
<a href="" id="hovertitle">Hover Text</a> 
</div> 

<div id="popup"> 
    testing 123 
</div> 

這是我jfiddle包括jQuery的鏈接http://jsfiddle.net/2XG9j/1/ 它的工作原理上jfiddle，但是當我跟我的動態對象上運行它，它不會對其他環節的工作。

Answer 1

嘗試使用.next(),.toggle();對於其中className以"popup"在css開頭的元素設置display:none;附着事件到選擇給定html在問題"[class^=parent]"，元素，其中className始於"parent"

$(document) 
 
.on("mouseenter", "[class^=parent]", function(e) { 
 
    $(this).next("[class^=popup]").toggle() 
 
}) 
 
.on("mouseleave", "[class^=parent]", function(e) { 
 
    $(this).next("[class^=popup]").toggle() 
 
});

div[class^="parent"] { 
 
    border: 2px solid green; 
 
    padding 4px; 
 
} 
 
div[class^="popup"] { 
 
    border: 2px solid red; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<div class="parent"> 
 
    <a href="" id="hovertitle">Hover Text</a> 
 
</div> 
 

 
<div class="popup"> 
 
    test 
 
</div> 
 

 
<div class="parent2"> 
 
    <a href="" id="hovertitle">Hover Text</a> 
 
</div> 
 

 
<div class="popup2"> 
 
    test 2 
 
</div>

的jsfiddle http://jsfiddle.net/2XG9j/5/

---

注意，預期的結果也可以被使用css:hover實現，下一個兄弟+選擇，而無需使用javascript

div[class^="parent"] { 
 
    border: 2px solid green; 
 
    padding 4px; 
 
} 
 
div[class^="popup"] { 
 
    border: 2px solid red; 
 
    display: none; 
 
} 
 
div[class^="parent"]:hover + div[class^="popup"] { 
 
    display: block; 
 
}

<div class="parent"> 
 
    <a href="" id="hovertitle">Hover Text</a> 
 
</div> 
 

 
<div class="popup"> 
 
    test 
 
</div> 
 

 
<div class="parent2"> 
 
    <a href="" id="hovertitle">Hover Text</a> 
 
</div> 
 

 
<div class="popup2"> 
 
    test 2 
 
</div>

的jsfiddle http://jsfiddle.net/2XG9j/6/