Как решить проблему с созданием экземпляров через функцию-конструктор?

Question

[Руслан Тимурзиев]

https://jsfiddle.net/u8ndofac/
Так вот.
Есть модуль WindowComponent, который возвращает конструктор. Далее создаются его два экземпляра:

var myFiles = new WindowComponent({
	action: '#my-files',
	ID: 'myFiles',
	width: '200',
	height: '200',
});
var myComputer = new WindowComponent({
	action: '#my-computer',
	ID: 'myCompWindow',
	width: '200',
	height: '200',
});

Также у нас есть html, где у нас есть icon'ы, по которым мы должны кликать и показывать модалки, которые привязаны к айдишникам иконокок:

<div id="app">

	<div class="icon" id="my-files">
		<div class="icon__img">
			<img class="icon__src" src="src/img/computer.png">
		</div>
		<div class="icon__title">
			<p class="icon__info">Мои документы</p>
		</div>
	</div>
	
	<div class="icon" id="my-computer">
		<div class="icon__img">
			<img class="icon__src" src="src/img/computer.png">
		</div>
		<div class="icon__title">
			<p class="icon__info">Мой компьютер</p>
		</div>
	</div>
	
</div>

Так вот, почему-то в модуле WindowComponent в этом месте:

document.querySelector(this.action).addEventListener('click', function() {
    document.getElementById(self.ID).classList.remove('window__hide');
});

У нас срабатывает только последний экземпляр. Т.е. клик ловиться исключительно на "#my-computer" и появляется модалка myComputer. Клик по "#my-files" ничего не дает, ошибок нет тоже. Если поменять местами порядок создания экземпляра, то наоборот будет показываться модалка "#myFiles" по клику на "#my-files", а "#my-computer" ничего отлавливать не будет.
Т.е. постоянно вызывается последний созданный экземпляр, хотя у нас добавляются в id="app" две разные модалки со своими свойствами(как и должно быть). Такое ощущение, будто после вызова второго экземпляра, все экземляры до него ломаются, при этом, как я уже говорил, модалки в документе все есть и имеют свои свойства.
https://jsfiddle.net/u8ndofac/

Ребята, помогите, пожалуйста!)

Answer 1

[Сергей delphinpro]

Проблема здесь
app.innerHTML += template;

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

Как надо делать?

Не работайте со строками и innerHTML.
Создавайте Node, вешайте на неё обработчик и вставляйте эту ноду в страницу соответствующими методами.

Вот примерно так https://jsfiddle.net/u8ndofac/1/

Comments

[Руслан Тимурзиев]

Добрый Человек, спасибо вам, сделал как вы указали!!!