Javascript 即使脚本位于同一页上，我的elementID也为null

我的程序是这样工作的。我单击“#cslp_hov”，将调用img_mask.js中的函数，然后它将转到外部php并返回一些数据。“agenda_success”函数会将这些数据打断，并将html附加到可单击的链接中。当我点击它们时，我想更改主内容的内容。但错误是：“无法读取null的属性html”。当脚本和元素位于同一个php文件上时，为什么为null

index.php

$（文档）.ready（函数（）{
document.getElementById（'main_content'）.style.display='block'；
window.agenda=函数（id\u num，id\u name）{
$（“#主要内容”）.html（“”+id_name+“”）；
};
});

img_mask.js

（函数（$）{
$（文档）.ready（函数（）
{
功能议程成功（数据集）{
var-str=数据集；
var res=dataset.split（“/”）；
回路长度=res.length-1；
对于（i=0；i而不是

for(i=0;i<loop_cnt;i++){
    $('.sidebar-nav').append("<li><a href='#' onclick='agenda("+res[i]+", \""+res[i+1]+"\")'>"+res[i+1]+"</a></li>");

    i++;
}

for（i=0；iDid在此之前是否包含jQuery？是的。得到了我的修复，window.onload=function（）{window.agenda=function（id#num，id#name）{$（'main#content'）.html（'；}；}；：））只需将其加载即可读取#main#content它是否为
onload
，
$（文档）.ready
也应该可以正常工作，因为它会等待DOM加载。但不管怎样，我很高兴您能在哪里修复它。
 (function($){
    $(document).ready(function()
  {


 function agenda_success(dataset){
            var str = dataset;
            var res = dataset.split("/");
            loop_cnt = res.length-1;
            for(i=0;i<loop_cnt;i++){
                $('.sidebar-nav').append("<li><a href='#' onclick='agenda("+res[i]+", \""+res[i+1]+"\")'>"+res[i+1]+"</a></li>");

                i++;
            }
       };    

 $('#cslp_hov').click(function() {
                $(this).parent().css('background', '#4B42AB');
                $('.sidebar-nav').html('<li class="sidebar-brand"><a href="#"  data-toggle="modal" data-target="#modalCSLP">CSLP</a></li>');
                $.ajax({
                    type: "POST",
                    url: 'templates/cslptemplate/agenda_menu.php',
                    data: {key: 2},
                    success : function(data) {
                        //First Sol 
                      // $('.sidebar-nav').append(data);
                      // $('#main_content').html('Hello');
                      //End of First Sol
                      agenda_success(data);
                   }
                });
                $('.sidebar-nav').append('<li><a href="#" data-toggle="modal" data-target="#modalEditCSLP">Edit Description <span class="glyphicon glyphicon-pencil"></span></a></li>');

            });})
 })(jQuery);

for(i=0;i<loop_cnt;i++){
    $('.sidebar-nav').append("<li><a href='#' onclick='agenda("+res[i]+", \""+res[i+1]+"\")'>"+res[i+1]+"</a></li>");

    i++;
}

for(i=0;i<loop_cnt;i++){
    var newLink = $("<a href='#'>" + res[i+1] + "</a>")
    newLink.on('click', function() {
        agenda(res[i], res[i+1]);
    });
    $('.sidebar-nav').append(newLink.wrap("<li></li>"));

    //i++; I don't know why this incrementer is here, but you'll be skipping entries if you keep it
}