javascript - 使用 .load() 加载后 Div 保持为空

Question

我看不出有任何理由无法让全日历正常工作。我用下面的代码尝试了一个非常基本的全日历。

index.php:

<link rel='stylesheet' href='components/fullcalendar/fullcalendar.css' />
<script src='components/fullcalendar/lib/moment.min.js'></script>
<script src='components/fullcalendar/fullcalendar.js'></script>
<script src='components/fullcalendar/lang/de.js'></script>
<script type='text/javascript' src='components/fullcalendar/gcal.js'></script>
<script src="javascript/jquery.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
    // page is now ready, initialize the calendar...
    $('#calendar').fullCalendar({
    lang: 'de',
    events: 'https://www.google.com/calendar/feeds/e_2_de%23weeknum%40group.v.calendar.google.com/public/basic',
    });
 });
</script>      

我检查过，所有这些文件都存在!在 index.php一个<div>充满了<div id="calendar"></div>通过.load . .load操作正常，但 <div id="calendar">总是空的!

我分别尝试了相同的文件，效果很好。如果您想看一下，我将非常感谢您的帮助:

网址:http://bit.ly/1rLA4UY
要查看问题，请转到 Termine => ALLE TERMINE

出现的div填充了<div id="calendar"></div>但保持空白而不是显示完整日历/日历。

Answer 1

因为 #calendar 在页面加载后还不存在，您的脚本将找不到它。

您必须在使用 .load() 加载 div 之后运行此脚本，而不是在文档准备就绪时运行此脚本

---

加载div后加载日历

$(document).ready(function () {

    // Innerhalb der Liste href auslesen und durch # ersetzen, title-Attribut mit dem Wert des href schreiben
    $("div.list-wrap a").each(function () {

        var url = $(this).attr("href");
        $(this).attr("title", url).attr("href", "#");

    });

    // per Click entsprechende URL in das DIV laden, aber nur das DIV #seiteninhalt
    $("div.list-wrap a").click(function () {
        var quelle = $(this).attr("title");
        $("#content_small").load(quelle, function () { // after done loading do below
            if (quelle.indexOf('cal.html') > -1) { // check if clicked on cal.html
                $('#calendar').fullCalendar({ // if clicked on cal.html load the plugin
                    lang: 'de',
                    events: 'https://www.google.com/calendar/feeds/e_2_de%23weeknum%40group.v.calendar.google.com/public/basic'
                })
            }
            $("#content_small").fadeIn(500);
        });
    });

});