在ajax调用后无法设置null的属性'onclick'

Question

我有一个javascript ajax函数，它从我的数据库中获取一些信息，并从这些信息创建具有标题和img源的新li元素。每个图像在创建时也会被赋予一个id。

我的问题是，我希望能够点击每个图像来触发一个功能，但是当我尝试通过它的ID访问每个图像我得到一个“无法设置属性onlick'的空错误。控制台

下面是代码：

的Ajax功能：

function loadNavbar() { 
     //Load layer list from WRL. 
     var navbar_list = new Nfis.Ajax.Wrl('carouselNavBarLocal', 
       "http://local.ol.nfis.org/wrl/resource", { 
        'domain' : 'nfis' 
       }); 

     var length = navbar_list.length; 
     navbar_list.events.register("onResponse", this, function() { 
      var wrNavbar_List = navbar_list.getList(); 
      var counter = 1; 
      //Grab the ul and li elements from the HTML Page 
      var ul=document.getElementById('ul-navbar'); 


      //For each navbar element in the wrl list, we need to create and 
      // set the map title and image source. 
      for (var i in wrNavbar_List) { 
       //we also need to grab the associated namespace and map title 
       // for loading the overlay_map layers and changing the title later. 

       namespaces.push(wrNavbar_List[i].getUrl2()); 
       map_titles.push(wrNavbar_List[i].getTitle(lang)); 

       //Creation and Setting of title and image source for each li element. 
       var navbar_h3 = document.createElement('h3'); 
       var navbar_img = document.createElement('img'); 
       navbar_h3.innerHTML = wrNavbar_List[i].getTitle(lang); 
       navbar_img.src = wrNavbar_List[i].getUrl(); 
       navbar_img.id = "test"+counter; 
       counter++; 

       //Creation of each li element 
       var li = document.createElement('li'); 
       li.appendChild(navbar_h3); 
       li.appendChild(navbar_img); 
       ul.appendChild(li); 
      } 
     }); 
     // 
     //navbar_list.fetchList(); 
    } 

在我的脚本的底部是的onclick功能：

//Two tests for testing loading in forest cover overlay layers 
    // and removeMapLayers() function 
    document.getElementById('test1').onclick = function() { 
     alert('test'); 
     if (lang === 'fr') { 
      changeMapTitle('Carte de la couverture forestière'); 

     } else { 
      changeMapTitle('Canada Forest Cover Map'); 
     } 
     loadOverlayLayers('forestCoverLayersLocal'); 
     reloadMap(); 
    } 

    document.getElementById('test3').onclick = function() { 
     if (lang === 'fr') { 
      changeMapTitle('Test des couches de base'); 

     } else { 
      changeMapTitle('Canada Forest Cover Map'); 
     } 
     removeOverlayLayers(mapLayers); 
    } 

我已经花了大部分时间试图解决这个问题无济于事。事情我已经尝试过window.onload（），回调和$（document）.ready（function）之类的东西。请帮帮我！

Answer 1

只是柜面其他人是否有这个问题，我设法找到解决办法：

通过将两次单击测试中的“onresponse”回调后for循环，我能够迫使单击功能后运行所有李元素都已创建。

下面是更新后的代码：

function loadNavbar() { 

     //Load layer list from WRL. 
     var navbar_list = new Nfis.Ajax.Wrl('carouselNavBarLocal', 
       "http://local.ol.nfis.org/wrl/resource", { 
        'domain' : 'nfis' 
       }); 

     var length = navbar_list.length; 
     navbar_list.events.register("onResponse", this, function() { 
      var wrNavbar_List = navbar_list.getList(); 
      var counter = 1; 
      //Grab the ul and li elements from the HTML Page 
      var ul=document.getElementById('ul-navbar'); 


      //For each navbar element in the wrl list, we need to create and 
      // set the map title and image source. 
      for (var i in wrNavbar_List) { 
       //we also need to grab the associated namespace and map title 
       // for loading the overlay_map layers and changing the title later. 

       namespaces.push(wrNavbar_List[i].getUrl2()); 
       map_titles.push(wrNavbar_List[i].getTitle(lang)); 

       //Creation and Setting of title and image source for each li element. 
       var navbar_h3 = document.createElement('h3'); 
       var navbar_img = document.createElement('img'); 
       navbar_h3.innerHTML = wrNavbar_List[i].getTitle(lang); 
       navbar_img.src = wrNavbar_List[i].getUrl(); 
       navbar_img.id = "test"+counter; 
       counter++; 

       //Creation of each li element 
       var li = document.createElement('li'); 
       li.appendChild(navbar_h3); 
       li.appendChild(navbar_img); 
       ul.appendChild(li); 
      } 

      //Two tests for testing loading in forest cover overlay layers 
      // and removeMapLayers() function 
      document.getElementById('test1').onclick = function() { 
       if (lang === 'fr') { 
        changeMapTitle('Carte de la couverture forestière'); 

       } else { 
        changeMapTitle('Canada Forest Cover Map'); 
       } 
       loadOverlayLayers('forestCoverLayersLocal'); 
       reloadMap(); 
      } 

      document.getElementById('test3').onclick = function() { 
       if (lang === 'fr') { 
        changeMapTitle('Test des couches de base'); 

       } else { 
        changeMapTitle('Canada Forest Cover Map'); 
       } 
       removeOverlayLayers(mapLayers); 
      } 

     }); 

     navbar_list.fetchList(); 
    }