Kann Eigenschaft 'onclick' von Null nach Ajaxaufruf nicht setzen

Question

Ich habe eine javascript ajax Funktion, die einige Informationen von meiner Datenbank nimmt und neue li Elemente mit einer Überschrift und img Quelle von dieser Information schafft. Jedes Bild erhält beim Erstellen eine ID.

Mein Problem ist, dass ich in der Lage sein soll, auf jedes Bild zu klicken, um eine Funktion auszulösen, aber wenn ich versuche, auf jedes Bild mit seiner ID zuzugreifen, bekomme ich eine "Kann nicht 'onlick' von null error in der . Konsole

Hier ist der Code:

Ajax Funktion:

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

Am unteren Rand meines Skript sind die Onclick Funktionen:

//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); 
    } 

Ich habe die meisten von heute versucht, dies ohne Erfolg zu beheben. Dinge, die ich bereits window.onload(), Callbacks und $ (Dokument) .ready (Funktion) unter Sorten versucht. Bitte hilf mir!

Answer 1

nur für den Fall jemand anderes mit diesem Problem ich es geschafft, die Lösung zu finden:

die beiden Klick Tests im „onresponse“ Rückruf nach der for-Schleife Indem ich konnte die Klickfunktionen zwingen, nach laufen Alle li-Elemente wurden erstellt.

Hier ist der aktualisierte Code:

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