Проблема с .hover и .on с jQuery

Question

У меня проблема с использованием .hover и .on для создания изменений с помощью jQuery.

Я включил jsfiddle с кодом :

$(".nName").hover(function() {
    $(this).css({'color': "blue", "text-decoration": "underline"});
},
function() {
    $(this).css('color', "black");
});

Answer 1

Проблема в вашей скрипке заключается в том, что вы пытаетесь прикрепить событие к динамически отображаемому элементу.

Если вы применяете событие к какому-либо элементу, оно должно присутствовать в DOM.

В вашем случае вам нужно привязать ваше событие к document, а затем к его дочернему элементу.

Пожалуйста, перепишите ваш jquery следующим образом

$(document).on({
  mouseenter: function () {
    $(this).css({
      'color': "blue",
      "text-decoration": "underline"
    });
  },
  mouseleave: function () {
    $(this).css('color', "black");
  }
}, ".nName");

$(document).on('click', '.nName', function () {
  $(".individualStream").empty();
  var specificName = $(this).text();
  var specificUser = streams.user.specificName;

  for (var i = 0; i < specificUser.length; i++) {
    var tweet = specificUser[i].message;
    var $tweet = $('<div></div>');
    var $name = $('<span class="nName"></span>');
    var $time = $('<div class="time"></div>');
    var $at = $('<span class="at"></span>');
    $time.text("Time of Tweet: " + tweet.created_at);
    $name.text(specificName);
    $at.text('@');
    $tweet.text(" " + tweet);
    $tweet.prepend($name);
    $tweet.prepend($at);
    $tweet.append($time);
    $tweet.prependTo($(".inidvidualStream"));
    $('.twitterStream').hide();
    $('.individualStream').show();
  }
});

Я использую событие mouseenter и mouseleaveздесь, потому что мы не можем использовать тот же синтаксис, что и hover в случае динамического рендеринга элемента.

Answer 2

$(".nName").hover(function() {
  $(this).css({
    'color': "blue",
    "text-decoration": "underline"
  });
}, function() {
  $(this).css('color', "black");
});

setTimeout(function() {
  $('body').append('<div class="nName2">Dynamically rendered node1</div>')
  // The hover event will take effect here.
  /**
  $(".nName2").hover(function() {
  $(this).css({
    'color': "blue",
    "text-decoration": "underline"
  });
}, function() {
  $(this).css('color', "black");
});
**/
}, 2000)

$(".nName2").hover(function() {
  $(this).css({
    'color': "blue",
    "text-decoration": "underline"
  });
}, function() {
  $(this).css('color', "black");
});

setTimeout(function() {
  $('body').append('<div class="nName3">Dynamically rendered node2</div>')

}, 2000)

$('body').on('mouseenter', '.nName3', function() {
  $(this).css({
    'color': "blue",
    "text-decoration": "underline"
  });
});
$('body').on('mouseleave', '.nName3', function() {
  $(this).css('color', "black");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="nName">Existing node</div>

Невозможно привязать событие наведения к динамически отображаемому узлу при инициализации страницы.

В противном случае вы можете использовать mouseenter и mouseleave вместо hover.