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(); установка display:none для элементов, где className начинается с "popup" по адресу css; присоединение события к селектору "[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/

---

Обратите внимание, что данные html на вопрос, ожидаемые результаты могут быть достигнуты при использовании 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/