0

Есть список ul. В нём блоки li. При первой загрузке страницы, при помощи jquery в список ul добавляются блоки li методом append() (Изначально ul пустой). Далее при прокрутке страницы добавляются ещё элементы в конец ul. При наведении на li блок появляется скрытый блок. Для отображения я применяю событие hover().

Проблема в том что это событие срабатывает для элементов которые были добавлены при первой загрузке страницы, а для элементов которые добавляются при прокрутке страницы это событие не срабатывает. Из-за чего это может быть? Добавлю. Так же есть hover который прописан при помощи css и он работает.

$(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>

4
  • пример кода покажи пожалуйста?
    – spectre_it
    29 мая 2016 в 9:56
  • @stas0k кода чего именно? наведения или добавления?
    – Tsyklop
    29 мая 2016 в 9:56
  • я имел ввиду сюда код свой загрузи чтобы можно было воспроизвести. или ссылку на твой пример. А вообще вроде ниже ответили уже
    – spectre_it
    29 мая 2016 в 10:03
  • @stas0k добавил в шапку.
    – Tsyklop
    29 мая 2016 в 11:37

3 ответа 3

2

Попробуйте обработчик сделать так

     $("body").on("hover", "ul li", function(e) {
            e.preventDefault();
            // действия
     });
3
  • теперь блок не появляется вовсе.
    – Tsyklop
    29 мая 2016 в 10:14
  • Так выложите свой код.
    – zkolya
    29 мая 2016 в 10:21
  • добавил в шапку
    – Tsyklop
    29 мая 2016 в 11:38
0

Вот здесь обработчик на добавленные объекты работает,дальше уже делайте как Вам необходимо

$("body").on("mouseover", "ul li", function(e) {
        e.preventDefault();

        $(this).text("Работает")

 });

https://jsfiddle.net/8fgdhsg8/2/

2
  • Спасибо. тоже решение.
    – Tsyklop
    31 мая 2016 в 10:03
  • Но на рабочем сайте не работает.
    – Tsyklop
    31 мая 2016 в 11:27
0

Решение: Перед добавлением новых элементов убирать обработчик событий hover и после добавления создавать новый обработчик событий.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.