Как узнать, что создание элементов управления Google Map сделано?

Question

Мне нужно динамически создать виджет пользовательского интерфейса с родительским div.id = 'myDivId', который является элементом управления картой Google.

var centerControlDiv = document.createElement('div');
var centerControl = new CenterControl(centerControlDiv, map);

centerControlDiv.index = 1;
centerControlDiv.id = 'myDivId';
map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);

// $('#myDivId') causes exception as $('#myDivId') is not created on 
// map as a DOM element yet.

var uiWidget = new uiWidget('myDivId');

// $(#myDivId) is used in class uiWidget().

class uiWidget {
  constructor(divId) {

    this.id = divId;

    // It should fail here due to this.$div property, as 
    // div 'myDivId' is not a DOM element yet by google map 
    // controls API.
    this.$div.click($.proxy(this.event_click, this));
  }


  get $div() {
    return $(‘#’ + this.id);
  }

  event_click(eve) {

  }
}

Но при создании этого родительского div события не происходит. Поэтому дочерний виджет пользовательского интерфейса не может быть создан в нужное время.

Как узнать, что родительский div с идентификатором 'myDivId' создан?

Answer 1

Вы пытаетесь сослаться на элемент DOM по идентификатору как дочерний элемент document, когда этот элемент только создан, но еще не добавлен в document.

Но у вас уже есть ссылка на элемент #myDivId в переменной centerControlDiv, поэтому вам не нужно использовать идентификатор для ссылки на него. Просто измените эту строку:

$('#myDivId').append("<div>UI widget</div>");

на:

$(centerControlDiv).append("<div>UI widget</div>");

Другими словами, чтобы ответить на ваш вопрос "Как узнать родителя" div с идентификатором 'myDivId' создан? ", этот div уже создан - вы создали его в вызове document.createElement('div'). Он просто не является потомком document.

Поэтому, когда вы используете $('#myDivId') или подобные вызовы, такие как document.getElementById('myDivId'), эти вызовы не могут его увидеть. Это просто автономный элемент, на который у вас есть ссылка, поэтому вы можете получить к нему доступ через этот элемент, а не искать его в документе DOM.

Обновление на основе вашего последнего кода:

To примените этот принцип к вашему uiWidget классу, вы можете заставить класс работать с фактическим элементом div, который вы создали, вместо того, чтобы обращаться к нему по ID. Еще лучше, поскольку вы используете jQuery, передайте ему объект jQuery с самого начала, например:

var uiWidget = new UiWidget( $(centerControlDiv) );

class UiWidget {
  constructor($div) {
    this.$div = $div;
    this.$div.click($.proxy(this.event_click, this));
  }

  // ...
}

Как видите, для кода больше не требуется идентификатор Div вообще и ему тоже не нужно get $div(). $div и this.$div уже являются объектом jQuery, обертывающим ваш centerControlDiv.

Я также изменил имя класса на UiWidget, чтобы следовать рекомендованному стилю JavaScript и избежать конфликта с uiWidget переменная, которая содержит экземпляр класса.