如何添加/删除<li>动态生成的 s 类？

Question

我正在jquery中创建一个动态生成的html<ul>，其中包含一些<li>元素。我希望通过悬停将active类添加到任何<li>元素中。我已经在jquery中尝试了一些函数，但它不会改变<li>元素，只有在<ul>元素上尝试它才能工作。 这是我的 html 代码：

<div class="col-md-3 all_session_section" id="listRight">
<ul class="meeting_lists" id="meeting_lists"></ul>

我的Javascript代码：

$.ajax({
url: myURL,
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: function (data) {
if (data.d.results.length > 0) {
AllTask = data.d.results;
html = '';

for (var i = 0; i < Number(AllTask.length); i++) {
html += '<li class="pass" data-tab="tab-1">';
html += '<div class="clear_border_active"></div>';
html += '<a href="#">';
html += '<div class="title">' + AllTask[i].Title + '</div>';
html += '<div class="details d-flex justify-content-end align-items-center"><span class="salon mr-3">' + AllTask[i].meeting_place + '</span><span class="date">' + JDate + '</span></div></a></li>';

}
document.getElementsByClassName('meeting_lists')[0].innerHTML = html;

和我的jquery函数：

$(".all_session_section  ul > li").hover(
function () {
$(this).addClass("active");
},
function () {
$(this).removeClass("active");
}
);

如果有人能帮我解决这个问题，我将不胜感激。

Answer 1

正如@Mohicane所说，在这种情况下，委托事件是你的救星(我的例子也将使用它们)。

但是，恕我直言，这只会使代码更加复杂，我个人会采用@Kinglish的解决方案并仅使用 CSS。对于任何网络工作，无论如何你都需要了解CSS。我强烈建议您深入研究它。

安全问题

像这样构造 HTML 时，必须事先清理您收到的数据中的值。否则，这很容易受到XSS(跨站点脚本)和Iframe注入攻击。最简单的解决方案是去除此数据可能具有的任何 HTML 标记。

溶液

我尝试尽可能多地重用您的代码(我已经生成了任务列表而不是 AJax 查询，因此该示例在此代码段中运行 - 单击下面的Run code snippet按钮，以查看它的实际效果)。

我还添加了一个活动类样式来演示行为(当列表项具有active类时，它将变为黄色)。

// I used this to generate some data instead of the ajax request
function generateTasks() {
const tasks = [];
for (var i = 0; i < 9; i++) {
tasks.push({
Title: 'some task ' + i,
meeting_place: 'some place ' + i
});
}

return tasks;
}
const AllTask = generateTasks();
const JDate = ' 2021-05-07';
let html = '';
for (var i = 0; i < Number(AllTask.length); i++) {
html += '<li class="pass" data-tab="tab-1">';
html += '<div class="clear_border_active"></div>';
html += '<a href="#">';
html += '<div class="title">' + AllTask[i].Title + '</div>';
html += '<div class="details d-flex justify-content-end align-items-center"><span class="salon mr-3">' + AllTask[i].meeting_place + '</span><span class="date">' + JDate + '</span></div></a></li>';
}
document.getElementsByClassName('meeting_lists')[0].innerHTML = html;
$(".all_session_section  ul > li").on('mouseenter', function() {
$(this).addClass("active");
})

$(".all_session_section  ul > li").on('mouseleave', function() {
$(this).removeClass("active");
});

.active {
background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-3 all_session_section" id="listRight">
<ul class="meeting_lists" id="meeting_lists"></ul>
</div>

Answer 2

紧跟在这一行之后：

document.getElementsByClassName('meeting_lists')[0].innerHTML = html;

在jQuery中可以简化为：

$('#meeting_lists').html(html)

您的侦听器可以在该特定 UL 上创建，具有 2 个回调，一个用于mouseenter，另一个用于mouseleave

$("#meeting_lists li").hover(
function () {
$(this).addClass("active");
},

函数 () { $(this).removeClass("active"); } );

但是，为什么不为悬停设置一个 css 规则呢？

.all_session_section  ul > li:hover{
/* whatever the active class had for styles */
}