Question

我正在尝试在执行jQuery ajax调用后附加到html的li标签中添加一个CSS类。目标是在鼠标光标悬停在该元素上时向附加的li元素添加左边框，并在鼠标离开li元素时删除边框。但是，代码不会执行，并且没有边框添加到li标记。

我的jQuery：

$(document).ready(function () {
  $("#searchButton").on('click', function() {
    var searchValue = $('.form-control').val();
    var urlVar = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchValue + "&format=json&callback=?";
    $.ajax({
      type: "GET",
      url: urlVar,
      contentType: "json",
      async: false,
      dataType: "json",
      success: function(searchData) {
        $('#output').html(" ");
        for (var i = 0; i < searchData[1].length; i++) {
          $('#output').prepend(searchData[1][i] + '<li id="listItems"><a href=' + searchData[3][i] + '>'  + searchData[2][i] + '</a></li>');
          $('#output a').attr('target', '_blank')
      }
      },
      error: function() {
        alert("Something is off, man!!!")
      }
    });
  });
  $('#listItems').mouseenter(function() {
    $(this).addClass('listFormat');
  });
  $('#listItems').mouseleave(function() {
    $(this).removeClass('listFormat');
  });
});

我的CSS：

listFormat {
 border-left: 5px black solid;
}

真的不确定如何解决这个问题。

非常感谢。

Answer 1

快速回答可能是为了监听动态添加的元素上使用on方法所需的事件。

  $('#listItems').on('mouseenter', function() {
    $(this).addClass('listFormat');
  });
  $('#listItems')on('mouseleave', function() {
    $(this).removeClass('listFormat');
  });

另外，正如@junkfoodjunkie所说，你提出的技术是完全可行但有点过于复杂，因为已经有一个有用的CSS标签，当鼠标在元素上移动时会应用一种风格。有关快速示例，请参阅http://www.w3schools.com/cssref/sel_hover.asp。

将类添加到附加元素

1 个答案: