jquery不适用于javascript innerHtml

请看看下面的代码。我想有多个定时器在一个页面上：jquery不适用于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>

我的代码工作正常，当我创建的div硬编码。但是，当我通过Ajax加载它（为了理解代码，暂时我正在使用函数LoadText（）创建Divs），我无法显示它。请帮助我。

来源

2011-03-01 Kartikeya

您应该使用#defaultCountdown div的类或唯一ID。

此外，由于你告诉它来寻找一类以＃符号在里面，这将混淆选择器引擎：

$('div.#defaultCountdown').each(function()

尝试将其更改为一个类，并使用：

$('div.defaultCountdown').each(function()

更新：好的，你的代码不工作的原因是因为LoadText()函数永远不会被调用。如果你更新你的脚本是这样的，它会工作（demo）：

$(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" 
     }); 
    }); 
});

来源

2011-03-01 14:25:53 Mottie

只是为了更清楚地说明，我创建的div的id是'defaultCountdown'，而类是'倒计时'。我需要一个解决方案来引用我使用Ajax响应文本或通过JavaScript innerHTML创建的Div。如果我写这个硬盘编码，相同的代码完美的作品。 – Kartikeya 2011-03-01 16:55:23

我更新了我的答案，并包含了脚本工作的演示。 – Mottie 2011-03-02 03:04:36

**哦，太好了！现在正在工作。感谢您的回复** – Kartikeya 2011-03-02 06:34:33

听起来像是一个计时问题。您的jQuery代码在数据呈现给页面时运行，而不是在您的ajax查询完成后运行。做一个函数，而不是准备运行，并在ajax完成后调用它。

来源

2011-03-01 14:25:41 madmik3

你$（“格＃defaultCountdown”）每个（函数（）循环当文档准备好运行一次 - 如果你随后使用Ajax添加新的div，那么你需要确保你重新运行你的$（'div。＃defaultCountdown'）。每个（function（）代码再次添加新的div。

jQuery live （）函数对此很有用

来源

2011-03-01 14:26:20

其中之一，你有这个：

div.#defaultCountdown

这应该是：

div#defaultCountdown

来源

2011-03-01 14:26:22

很棒的捕捉，迈克。 – JAAulde 2011-03-01 14:34:38

我没有看到你打电话给你LoadText功能随时随地
的ID必须在文档中是唯一的，你LoadText功能不尊重规则
无关，但你并不需要逃生者双引号的单引号字符内的LoadText

来源

2011-03-01 14:26:45 JAAulde

见 Kartikeya 2011-03-01 18:51:58

工作代码，如果我不使用Ajax响应文本或JavaScript的innerHTML。这个方向的任何解决方案都将得到满足。请在下面找到正在工作的修改后的代码。在此代码中，我有创建了硬编码为的div。这两个代码都可以通过复制这些代码并将其保存为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>

来源

2011-03-01 17:04:33 Kartikeya

请**编辑**您的问题并添加此信息而不是提供“答案”。 – 2011-03-02 09:02:39

jquery不适用于javascript innerHtml

回答

相关问题