Problemet er jeg gerne vil have hover til at virke med Dynamic content.
Dette virker fint, men er ikke Dynamic:
jQuery(document).ready(function($) {
$(".foo").on("mouseenter", ".hover", function(event){
console.log("test");
$(this).toggleClass("highlight");
}).on("mouseleave", ".hover", function(event){
console.log("test");
$(this).toggleClass("highlight");
});
});
<html>
<head>
</head>
<body style="padding:30px;">
<div id="foo1" class="foo"><div class="hover">Bole_1</div></div>
<div id="foo2" class="foo"><div class="hover">Bole_2</div></div>
<div id="foo3" class="foo"><div class="hover">Bole_3</div></div>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</body>
</html>
Dette virker ikke, og er Dynamic:
jQuery(document).ready(function($) {
// Test til at lave Dynamic Content.
var i = 1;
$('div.test2').on('click', function( event ) {
i++;
$('<div id="foo'+i+'" class="foo"><div class="hover">Bole_'+i+'</div></div>').appendTo( "body" );
});
$(".foo").on("mouseenter", ".hover", function(event){
console.log("test");
$(this).toggleClass("highlight");
}).on("mouseleave", ".hover", function(event){
console.log("test");
$(this).toggleClass("highlight");
});
});
<html>
<head>
</head>
<body style="padding:30px;">
<div class="test2" style="height:30px;width:40px;background:#232323;margin-top:30px;"></div>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</body>
</html>