Question

请查看下面的代码。我想在一个页面上设置一个多个计时器：

<!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（）创建Div），我无法显示它。请帮帮我。

Answer 1

首先，你有这个：

div.#defaultCountdown

应该是：

div#defaultCountdown

Answer 2

我没有看到你在任何地方调用你的LoadText函数
ID必须在文档中是唯一的，并且您的LoadText函数不遵守该规则
不相关，但您不需要在LoadText中的单引号字符串中转义那些双引号

Answer 3

听起来像是一个时间问题。您的jQuery代码在数据呈现到页面之后运行，而不是在您的ajax查询完成之后。让它成为一个函数，而不是准备好运行的东西，并在ajax完成后调用它。

Answer 4

您应该为#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"
        });
    });
});

Answer 5

你的$（'div。＃defaultCountdown'）。每个（function（）循环在文档准备就绪时运行一次 - 如果你随后使用Ajax添加新的div，那么你需要确保你重新运行你的$（' div。＃defaultCountdown'）。每个（function（）代码再次添加了新的div。

jQuery live（）函数对此很有用。

Answer 6

如果我没有使用Ajax响应文本或JavaScript innerHTML，那么工作代码。这个方向的任何解决方案都会受到影响。请在下面找到有效的修改代码。在此代码中，我创建了divs hardcoded 。可以通过复制此代码并将其保存到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>

Jquery不适用于javascript innerHtml

6 个答案: