動態表格加載的Javascript中斷

我正在實施addtocalendar.com上的javascript小部件。他們的代碼示例發佈如下。一切正常，當我把它放在一個頁面上。不過，我希望日曆小部件按鈕顯示在從ajax返回的動態表上（示例代碼中的第3步）。當我這樣做時，它會打破。日曆按鈕不會顯示在動態表格的行中（這是我需要的）。動態表格加載的Javascript中斷

我需要對示例代碼做出什麼修改，以便日曆小部件按鈕將顯示在從ajax返回的動態創建的表上？

我在控制檯中沒有收到錯誤。該按鈕根本不顯示。

<html> 
    <head> 
     <!-- 1. Include style --> 
     <link href="http://addtocalendar.com/atc/1.5/atc-style-blue.css" rel="stylesheet" type="text/css"> 
    </head> 
    <body> 
     <!-- 2. Include script --> 
     <script type="text/javascript">(function() { 
     if (window.addtocalendar)if(typeof window.addtocalendar.start == "function")return; 
     if (window.ifaddtocalendar == undefined) { window.ifaddtocalendar = 1; 
      var d = document, s = d.createElement('script'), g = 'getElementsByTagName'; 
      s.type = 'text/javascript';s.charset = 'UTF-8';s.async = true; 
      s.src = ('https:' == window.location.protocol ? 'https' : 'http')+'://addtocalendar.com/atc/1.5/atc.min.js'; 
      var h = d[g]('body')[0];h.appendChild(s); }})(); 
</script> 

<!-- 3. Place event data --> 
<span class="addtocalendar atc-style-blue"> 
    <var class="atc_event"> 
     <var class="atc_date_start">2015-05-04 12:00:00</var> 
     <var class="atc_date_end">2015-05-04 18:00:00</var> 
     <var class="atc_timezone">Europe/London</var> 
     <var class="atc_title">Star Wars Day Party</var> 
     <var class="atc_description">May the force be with you</var> 
     <var class="atc_location">Tatooine</var> 
     <var class="atc_organizer">Luke Skywalker</var> 
     <var class="atc_organizer_email">[email protected]</var> 
    </var> 
</span>

來源

2015-11-07 Grant Friedline

也許你可以在回調中添加的JavaScript。然後，當你返回一個動態表時，該Javascript將運行並添加按鈕。

不知道你將如何實現動態表，但也許你可以用這個例子的工作：

//調整代碼

<html> 
<head> 
    <link href="http://addtocalendar.com/atc/1.5/atc-style-blue.css" rel="stylesheet" type="text/css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $.ajax({ 
       url: 'test.html', 
       success: function (data) { 
        $("body").html(data); 
        (function() { 
         if (window.addtocalendar)if (typeof window.addtocalendar.start == "function")return; 
         if (window.ifaddtocalendar == undefined) { 
          window.ifaddtocalendar = 1; 
          var d = document, s = d.createElement('script'), g = 'getElementsByTagName'; 
          s.type = 'text/javascript'; 
          s.charset = 'UTF-8'; 
          s.async = true; 
          s.src = ('https:' == window.location.protocol ? 'https' : 'http') + '://addtocalendar.com/atc/1.5/atc.min.js'; 
          var h = d[g]('body')[0]; 
          h.appendChild(s); 
         } 
        })(); 
       } 
      }); 
     }); 
    </script> 
</head> 
<body></body> 
</html>

//例動態表的test.html

<table> 
    <tr> 
     <td>A</td> 
     <td> 
      <span class="addtocalendar atc-style-blue"> 
       <var class="atc_event"> 
        <var class="atc_date_start">2015-05-04 12:00:00</var> 
        <var class="atc_date_end">2015-05-04 18:00:00</var> 
        <var class="atc_timezone">Europe/London</var> 
        <var class="atc_title">Star Wars Day Party</var> 
        <var class="atc_description">May the force be with you</var> 
        <var class="atc_location">Tatooine</var> 
        <var class="atc_organizer">Luke Skywalker</var> 
        <var class="atc_organizer_email">[email protected]</var> 
       </var> 
      </span> 
     </td> 
    </tr> 
    <tr> 
     <td>B</td> 
     <td> 
      <span class="addtocalendar atc-style-blue"> 
       <var class="atc_event"> 
        <var class="atc_date_start">2015-05-04 13:00:00</var> 
        <var class="atc_date_end">2015-05-04 19:00:00</var> 
        <var class="atc_timezone">Europe/London</var> 
        <var class="atc_title">Foo</var> 
        <var class="atc_description">Bar</var> 
        <var class="atc_location">London</var> 
        <var class="atc_organizer">Foobar</var> 
        <var class="atc_organizer_email">[email protected]</var> 
       </var> 
      </span> 
     </td> 
    </tr> 
</table>

來源

2015-11-07 16:43:28

非常感謝您的建議。我會嘗試這個週末，併發布結果:) –

我得到它的基礎上的答案。夠好了！ –

動態表格加載的Javascript中斷

回答

相關問題