Google Event Listener: Uncaught TypeError: Не удается прочитать свойство «addEventListener» из null

Question

Я задал этот вопрос раньше, чем addListener в addListenerOnce, который не работает, и ответ заключается в том, что я пытался добавить прослушиватель кликов перед элементом I «Ищут». Проблема в том, что я не могу понять, почему она работает для двух лучших событий. Событие происходит от события клика легенды. Два первых события будут отображаться вместе. Это похоже на то, что слушатель работает только 1 раз. Я попытался использовать addListenerOnce, и событие тоже не работает (например, 1-я легенда) для вызова события второго уровня легенды, но оно вообще не работает.

Например, я нажимаю на легенду факультета, а затем нажимаю fpa и fskm, он работает просто замечательно, но когда я нажимаю «Секс» или «Уровень образования», тогда щелкните их соответствующую 2-ю легенду об ошибке «Некопать TypeError: Невозможно прочитать свойство« addEventListener », null. Я даже попробовал DOMContentLoaded, все еще не работая. Как же я это делаю? Ниже приведен код, предупреждение просто для проверки.

var legend = document.createElement('div'); 
    legend.id = 'legend'; 
    var content = []; 
    content.push('<h3><b>View option</b></h3>'); 
    content.push('<div id="general"><svg height="20" width="200"><g><rect width="15" height="12"class="general" ></g><g><text x="26" y="10">General</text></g></svg></div>'); 
    content.push('<div id="faculty"><svg height="20" width="200"><g><rect width="15" height="12"class="nothing"></g><g><text x="26" y="10">Faculty</text></g></svg></div>'); 
    content.push('<div id="sex"><svg height="20" width="200"><g><rect width="15" height="12"class="nothing"></g><g><text x="26" y="10">Sex</text></g></svg></div>'); 
    content.push('<div id="level"><svg height="20" width="200"><g><rect width="15" height="12"class="nothing"></g><g><text x="26" y="10">Level of education</text></g></svg></div>'); 
    legend.innerHTML = content.join(''); 
    legend.index = 1; 
    map.controls[google.maps.ControlPosition.RIGHT_TOP].push(legend); 
    var legendSpec = document.createElement('div'); 
    legendSpec.id = 'legend'; 
    var contentNew = []; 

    google.maps.event.addListenerOnce(map, 'idle', function() { 

     var genOpt = document.getElementById("general"); 
     google.maps.event.addDomListener(genOpt, 'click', function() { 
      alert("ok"); 
     }); 

     var sexOpt = document.getElementById("sex"); 
     google.maps.event.addDomListener(sexOpt, 'click', function() { 
      contentNew = []; 
      contentNew.push('<h3><b>Sex</b></h3>'); 
      contentNew.push('<div id="maleD"><svg height="20" width="200"><g><rect width="15" height="12"class="male" ></g><g><text x="26" y="10">Male</text></g></svg></div>'); 
      contentNew.push('<div id="femaleD"><svg height="20" width="200"><g><rect width="15" height="12"class="female"></g><g><text x="26" y="10">Female</text></g></svg></div>'); 
      legendSpec.innerHTML = contentNew.join(''); 
      legendSpec.index = 1; 
      alert("ok"); 
     }); 

     var facultyOpt = document.getElementById("faculty"); 
     google.maps.event.addDomListener(facultyOpt, 'click', function() { 
      contentNew = []; 
      contentNew.push('<h3><b>Faculty</b></h3>'); 
      contentNew.push('<div id="FSKMd"><svg height="20" width="200"><g><rect width="15" height="12"class="FSKM" ></g><g><text x="26" y="10">FSKM</text></g></svg></div>'); 
      contentNew.push('<div id="FPAd"><svg height="20" width="200"><g><rect width="15" height="12"class="FPA"></g><g><text x="26" y="10">FPA</text></g></svg></div>'); 
      legendSpec.innerHTML = contentNew.join(''); 
      legendSpec.index = 1; 
      alert("ok"); 
     }); 

     var levelOpt = document.getElementById("level"); 
     google.maps.event.addDomListener(levelOpt, 'click', function() { 
      contentNew = []; 
      contentNew.push('<h3><b>Level of Education</b></h3>'); 
      contentNew.push('<div id="degreeD"><svg height="20" width="200"><g><rect width="15" height="12"class="degree" ></g><g><text x="26" y="10">Degree</text></g></svg></div>'); 
      contentNew.push('<div id="diplomaD"><svg height="20" width="200"><g><rect width="15" height="12"class="diploma"></g><g><text x="26" y="10">Diploma</text></g></svg></div>'); 
      legendSpec.innerHTML = contentNew.join(''); 
      legendSpec.index = 1; 
      alert("ok"); 
     }); 

     map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(legendSpec); 
     calling(); 
    }); 

    function calling() { 
     google.maps.event.addListener(map, 'mouseover', function() { 

      var fskm = document.getElementById("FSKMd"); 
      google.maps.event.addDomListener(fskm, 'click', function() { 
       alert("ok"); 
      }); 

      var fpa = document.getElementById("FPAd"); 
      google.maps.event.addDomListener(fpa, 'click', function() { 
       alert("ok"); 
      }); 
//fskm and fpa legend come together in 1 legend 

       var degree = document.getElementById("degreeD"); 
       google.maps.event.addDomListener(degree, 'click', function() { 
        alert("ok"); 
       }); 

       var diploma = document.getElementById("diplomaD"); 
       google.maps.event.addDomListener(diploma, 'click', function() { 
        alert("ok"); 
       }); 

var male= document.getElementById("maleD"); 
       google.maps.event.addDomListener(male, 'click', function() { 
        alert("ok"); 
       }); 

       var female= document.getElementById("femaleD"); 
       google.maps.event.addDomListener(female, 'click', function() { 
        alert("ok"); 
       }); 

     }); 

    } 

Answer 1

Это означает, что ваше значение равно null. У вас нет правильной ссылки на то, что вы пытаетесь добавить к слушателю событий.

Я предполагаю, что, когда вы обращаетесь к уровню образования, вы имеете в виду это:

var degree = document.getElementById("degreeD"); 

Если да, degreeD не существует. Возможно, у вас неправильное имя в вашем HTML.

** Обновленный ответ, основанный на комментарии **

Поскольку этот элемент добавляется динамически - при выполнении кода, что элемент не существует, что означает ссылку на это, как вы обнаружили, null ,

Есть два способа справиться с этим.

1) Переместите degreeD слушателя событий внутри блока на

google.maps.event.addDomListener(levelOpt, 'click', function() { 

, так что degreeD существует.

Другой вариант - использовать делегирование событий для регистрации события для элемента, который еще не существует. Я не знаю API google.maps достаточно хорошо, чтобы знать, поддерживают ли они делегирование событий или если вам придется обрабатывать это вручную.