Question

在jQuery中，我动态创建了一个HTML表，最后，我添加了一个click函数，用于从加载的外部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>

Answer 1

问题是当处理程序被注册时，DOM中不存在绑定click事件处理程序的元素。

这是一个类似的问题，Prestaul有一个很好的解决方案：How do you access newly appended HTML elements in jQuery

Answer 2

在委派的表单中使用click方法。

您可能更喜欢使用{/ 1}}方法，例如

.on()

Answer 3

我不确定我多久盯着这个并且一直错过错字：/ js有一个名为“hightlight”的类，而css有一个名为“highlight”的类。卫生署！

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

3 个答案: