Jquery не работает для Javascript innerHtml - PullRequest
Новая
       19

Jquery не работает для Javascript innerHtml

0 голосов
/ 01 марта 2011

Пожалуйста, ознакомьтесь с кодом, написанным ниже. Я пытаюсь использовать несколько таймеров на одной странице: 

<!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 (для понимания кода, в настоящее время я создаю Div, используя функцию LoadText ()), я не могу отобразить его. Пожалуйста, помогите мне.

Ответы [ 6 ]

2 голосов
/ 01 марта 2011
  1. Я не вижу, чтобы вы вызывали функцию LoadText где-либо
  2. Идентификаторы должны быть уникальными в документе, и ваша функция LoadText не соблюдает это правило
  3. Не связаноно вам не нужно экранировать эти двойные кавычки внутри строки в одинарных кавычках в LoadText
2 голосов
/ 01 марта 2011

Для одного у вас есть это: 

div.#defaultCountdown

которое должно быть: 

div#defaultCountdown
0 голосов
/ 01 марта 2011

Рабочий код, если я не использую Ajax Response Text или 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>
0 голосов
/ 01 марта 2011

Ваш цикл $ ('div. # DefaultCountdown'). Each (function () запускается один раз, когда документ готов - если вы впоследствии добавляете новые div с помощью Ajax, вам необходимо убедиться, что вы повторно запустили свой $ (') div. # defaultCountdown '). each (function () code) теперь, когда добавлены новые div.

Хорошо подходит для этого функция jQuery live ().

0 голосов
/ 01 марта 2011

Вы должны использовать класс или уникальные идентификаторы для div #defaultCountdown.

Также это может сбить с толку механизм выбора, так как вы говорите ему искать класс со знаком # в нем: 

$('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"
        });
    });
});
0 голосов
/ 01 марта 2011

звучит как проблема синхронизации.Ваш код jQuery выполняется, когда данные отображаются на странице, а не после завершения вашего запроса ajax.Сделайте это функцией, а не чем-то, что нужно запустить, и вызовите ее после завершения работы ajax.

...