即使我的脚本在同一页面上，我的elementID也是null

Question

我的程序就像这样。我点击了＃cslp_hov＆＃39;将调用img_mask.js中的函数，然后它将转到外部php并返回一些数据。 ＆＃39; agenda_success＆＃39;函数中断该数据并将html附加到可点击的链接中。当我点击它们时，我想改变#main_content的内容。但是然后错误说：＆＃34;无法读取null＆＃34;的属性html。当脚本和元素在同一个php文件中时，为什么它为null。

的index.php

 <div id="main_container">
    <div id="wrapper">
       <div id="cslp_hov"></div>
    </div>
    <div id="main_content">
    </div>    
 </div>



    <script type="text/javascript" src="templates/cslptemplate/js/img_mask.js"></script>

    <script>
        $(document).ready(function(){

            document.getElementById('main_content').style.display='block';

            window.agenda=function(id_num, id_name){
                $("#main_content").html('<h1>'+id_name+'</h1>');
                };
        });


    </script>

img_mask.js

 (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);

Answer 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++;
}

为什么不创建一个新元素，添加它，然后为每个链接附加一个事件处理程序？

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
}