动态表加载时Javascript中断
我正在实现addtocalendar.com上的javascript小部件。他们的代码示例发布在下面。当我把它放在页面上时,一切正常。但是,我希望日历小部件按钮显示在示例代码中从ajax步骤3返回的动态表上。当我这么做的时候,它就断了。日历按钮不会显示在动态表的行中,这正是我所需要的 我需要对示例代码做什么更改,以便日历小部件按钮显示在从ajax返回的动态创建表上 我在控制台中没有收到错误。按钮根本不显示动态表加载时Javascript中断,javascript,php,jquery,html,ajax,Javascript,Php,Jquery,Html,Ajax,我正在实现addtocalendar.com上的javascript小部件。他们的代码示例发布在下面。当我把它放在页面上时,一切正常。但是,我希望日历小部件按钮显示在示例代码中从ajax步骤3返回的动态表上。当我这么做的时候,它就断了。日历按钮不会显示在动态表的行中,这正是我所需要的 我需要对示例代码做什么更改,以便日历小部件按钮显示在从ajax返回的动态创建表上 我在控制台中没有收到错误。按钮根本不显示 <html> <head> <
<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">luke@starwars.com</var>
</var>
</span>
也许您可以在回调中添加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>
//示例dynamic table 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">luke@starwars.com</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">foo@bar.com</var>
</var>
</span>
</td>
</tr>
</table>
非常感谢你的建议。我将在本周末尝试并发布结果: