gpt4 book ai didi

css - 无法在 jquery 中引用 css 类动态添加的 html 表行

转载 作者:太空宇宙 更新时间:2023-11-04 03:16:13 25 4
gpt4 key购买 nike

在 jQuery 中,我动态地创建了一个 HTML 表格,最后,我添加了一个点击函数来从加载的外部 css 文件中添加一个类。在 Chrome javascript 控制台中,我可以看到正确添加的类,但样式(颜色)没有改变。就像样式表元素不存在一样。我添加了主体样式更改,只是为了证明它实际上是在加载 HTML 页面。

这是创建表的js函数:

function processGetCallback(data) {
var tableText;
$('#KenTest').empty();
tableText = "<table cellpadding=2><tr><th>ID</th><th>text</th><th>date</th></tr>";
$.each(data, function(i, DataRow) {
tableText = tableText.concat("<tr><td>" + DataRow.IDCol + "</td><td>" + DataRow.txtCol + "</td><td>" + DataRow.dtCol + "</td></tr>");
});
tableText = tableText.concat("</table>");
$('#KenTest').append(tableText);
$('#KenTest tr').click(function () {
$(this).addClass("hightlight");
});
}

这是 CSS:

body {
background-color: lightgray;
}

td.highlight {
background-color: red;
color: white;
}

tr.highlight {
background-color: red;
color: white;
}

li.highlight {
background-color: red;
color: white;
}

这是 HTML 页面:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test of jQuery Ajax</title>
<link href="stylesheet.css" rel="stylesheet" />
</head>
<body>
<h1>jQuery Ajax Test</h1>

<h2>Get Ken Test Data</h2>
<ul id="KenTest">
<li class="highlight">ID: 1, txtCol: xyz, dtCol:1/1/2015</li>
</ul>
<hr>
<button id="btnGetAll" onclick="CallGetAllAjax()">Get All Rows</button><button id="btnGet2" onclick="CallGetTwoAjax()">Get 2 Rows</button>

<script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="js\main.js" type="text/javascript"></script>

</body>
</html>

最佳答案

问题是当注册处理程序时,您要绑定(bind)点击事件处理程序的元素在 DOM 中不存在。

这是一个类似的问题,Prestaul 提供了一个很好的解决方案:How do you access newly appended HTML elements in jQuery

关于css - 无法在 jquery 中引用 css 类动态添加的 html 表行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28665774/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com