[英]Jquery not works for javascript innerHtml
请查看下面编写的代码。 我试图在一页上设置多个计时器：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="jquery.countdown.css" media="all" type="text/css" />
<style type="text/css">
#defaultCountdown { width: 240px; height: 40px; }
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.countdown.js"></script>
<script language="javascript" type="text/javascript">
function LoadText()
{
document.getElementById('dd').innerHTML = '<div id=\"defaultCountdown\" class=\"countdown\" rel=\"87401\">hjhg</div><br/><div id=\"defaultCountdown\" class=\"countdown\" rel=\"60\">hjgj</div><br/><div id=\"defaultCountdown\" class=\"countdown\" rel=\"1800\">hjhg</div><br/>';
}
</script>
</head>
<body>
<div id="dd">
</div>
<script type="text/javascript">
// Initialization
$(document).ready(function()
{
var date = new Date();
$('div.#defaultCountdown').each(function()
{
$(this).countdown
({
until:parseInt($(this).attr("rel"),10),
format:"DHMS",
expiryText:"Expired"
})
})
});
</script>
</body>
</html>
创建Divs Hardcoded时，我的代码工作正常。 但是，当我通过Ajax加载它时（出于对代码的理解，目前我正在使用Function LoadText（）创建Divs），但无法显示它。 请帮帮我。
首先，您有：
div.#defaultCountdown
应该是：
div#defaultCountdown
听起来像是时间问题。 当数据呈现到页面时，而不是在ajax查询完成之后，您的jQuery代码就会运行。 使该函数生效，而不是要在ajax完成之后立即运行该函数。
您应该为#defaultCountdown div使用类或唯一ID。
这也会使选择器引擎感到困惑，因为您告诉选择器引擎寻找其中带有＃号的类：
$('div.#defaultCountdown').each(function()
尝试将其更改为类并使用：
$('div.defaultCountdown').each(function()
更新：好的，您的代码无法正常工作的原因是因为从未调用过LoadText()函数。 如果您将脚本更新为如下所示，它将可以正常工作（ 演示 ）：
$(document).ready(function() {
// This is needed to simulate the ajax call
LoadText();
// set up countdown timers
var date = new Date();
$('div.countdown').each(function() {
$(this).countdown({
until: parseInt($(this).attr("rel"), 10),
format: "DHMS",
expiryText: "Expired"
});
});
});
文档准备好后，$（'div。＃defaultCountdown'）。each（function（）循环运行一次-如果随后使用Ajax添加新的div，则需要确保重新运行$（'div。＃ defaultCountdown'）。each（function（）再次编码，因为已经添加了新的div。
jQuery live（）函数对此很有用。
如果我未使用Ajax响应文本或JavaScript innerHTML，则该代码有效。 朝这个方向的任何解决方案都适用。 请在下面找到有效的修改后的代码。 在此代码中，我创建了divs硬编码 。 通过复制此代码并将其保存到html文件，可以测试这两个代码。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Count Down Timer</title>
<link rel="stylesheet" href="jquery.countdown.css" media="all" type="text/css" />
<style type="text/css">
#defaultCountdown { width: 240px; height: 40px; }
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.countdown.js"></script>
<script language="javascript" type="text/javascript">
**//function LoadText()
// {
// document.getElementById('divo').innerHTML='<div id="defaultCountdown" class="countdown" rel="87401">aaa</div><br/><div id="defaultCountdown" class="countdown" rel="60">bbb</div><br/><div id="defaultCountdown" class="countdown" rel="1800">ccc</div><br/>';
// }**
// Initialization
$(document).ready(function()
{
var date = new Date();
$('div.countdown').each(function()
{
$(this).countdown
({
until:parseInt($(this).attr("rel"),10),
format:"DHMS",
expiryText:"Expired"
})
})
});
</script>
</head>
<body>
<div id="divo">
<div id="defaultCountdown" class="countdown" rel="87401">aaa</div><br/><div id="defaultCountdown" class="countdown" rel="60">bbb</div><br/><div id="defaultCountdown" class="countdown" rel="1800">ccc</div><br/>
</div>
</body>
</html>
Javascript innerHTML / jQuery .html（）每个id仅工作一次？
[英]Javascript innerHTML/jQuery .html() only works once per id?
Javascript：我的.textContent有效，但我的innerHTML不起作用
[英]Javascript: My .textContent works, but not my innerHTML
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.