There is a list of ul. It has li blocks. When the page first loads, using jquery, the li list is added to the ul list with the append() method (Initially, ul is empty). Further, while scrolling the page, more elements are added to the end of ul. When you hover on li block, a hidden block appears. To display, I use the hover () event.
The problem is that this event is triggered for the elements that were added when the page was first loaded, and for the elements that are added when the page is scrolled, this event does not work. What could it be? I will add. There is also a hover which is registered using css and it works.
$(document).ready(function() { var index = 0, count = 15, append = false, curr_append = 0; function appendBlock(count) { for (var i = 0; i <= count; i++) { $('ul.blocks').append( '<li class = "block-' + index + '">' + '<a> Block </a>' + '<div class="block-info"></div>' + '</li>' ); index++; } append = true; }; if (!append) { appendBlock(count); } $(window).scroll(function() { fromBottom = document.body.scrollHeight - scrollY; if (fromBottom <= 800 && curr_append <= 6) { appendBlock(count); curr_append++; } }); var curr_block; $('li[class^="block-"]').hover(function() { var start = "block-"; var curr_block_index = getIndex($(this), start); curr_block = $('li.block-' + curr_block_index); curr_block.find('div.block-info').stop().slideDown(300); }, function() { curr_block.find('div.block-info').stop().slideUp(300); }); $("body").on("hover", "ul.blocks li.block-0", function(e) { e.preventDefault(); alert("Hover"); console.log("hover"); }); function getIndex(element, start) { var tmp = element.attr('class').split(' '); for (var i = 0; i < tmp.length; i++) { if (tmp[i].startsWith(start)) { var result = tmp[i]; } } var index = result.substr(result.lastIndexOf('-') + 1, result.lengh); return index; }; }); ul.blocks { width: 100%; text-align: center; padding: 5px 5px 5px 5px !important; } li[class^='block-'] { width: 200px; height: 170px; vertical-align: top; display: inline-block; visibility: visible; background: #EFEFEF; position: relative; margin: 0 5px 10px 5px !important; box-shadow: 0 0px 6px rgba(0, 0, 0, 0.5) !important; -webkit-box-shadow: 0 0px 6px rgba(0, 0, 0, 0.5) !important; -moz-box-shadow: 0 0px 6px rgba(0, 0, 0, 0.5) !important; -o-box-shadow: 0 0px 6px rgba(0, 0, 0, 0.5) !important; -webkit-transition: .4s ease-out !important; -moz-transition: .4s ease-out !important; -ms-transition: .4s ease-out !important; -o-transition: .4s ease-out !important; transition: .4s ease-out !important; } li[class^='block-']:hover { box-shadow: 0 0px 20px rgba(0, 0, 0, 0.5) !important; -webkit-box-shadow: 0 0px 20px rgba(0, 0, 0, 0.5) !important; -moz-box-shadow: 0 0px 20px rgba(0, 0, 0, 0.5) !important; -o-box-shadow: 0 0px 20px rgba(0, 0, 0, 0.5) !important; } li[class^='block-'] a { line-height: 170px; color: #333; cursor: pointer; display: block; text-decoration: none; text-transform: uppercase; } div.block-info { display: none; width: 100%; height: 75px; position: absolute; top: 55%; left: 0; background: rgba(224, 224, 224, 0.5); } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="blocks clearfix"> </ul> 
