Разрыв ссылки на элемент при модификации свойства innerHTML контейнера - PullRequest
Новая
       14

Разрыв ссылки на элемент при модификации свойства innerHTML контейнера

4 голосов
/ 12 мая 2011

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

У меня есть тестовый пример: http://jsfiddle.net/mJ7bF/1/, в котором я ожидаю, что ссылка link1 будет вести себя точно так же, как link2.

Этот второй контрольный пример - тот же код, но вместо использования свойства innerHTML для добавления тега <br> я создаю разрыв строки с объектом. Этот тест ведет себя как ожидалось: http://jsfiddle.net/K4c9a/2/

Мой вопрос касается не этого конкретного кода, а концепции, лежащей в его основе: что происходит со ссылкой link1 в этом первом тестовом примере? Если он не ссылается на узел HTML / DOM, который виден, когда узел cont внедряется в документ, на что он ссылается и как это согласуется с природой ByReference объектов javascript?

Ответы [ 2 ]

3 голосов
/ 12 мая 2011

несколько вещей здесь.

прежде всего. строки являются неизменяемыми, поэтому выполнение element.innerHTML += "<br>" действует как полное чтение и перезапись.

секунда, почему это плохо:

помимо производительности, mootools (и, в этом отношении, jquery) назначает специальные уникальные последовательные идентификаторы всем элементам, на которые ссылаются. Вы ссылаетесь на элемент, вызывая селектор или создавая его и т. д.

затем рассмотрим, что СПЕЦИФИЧЕСКИЙ элемент с uid скажем 5. uid связан со специальным объектом с именем Storage, который находится за замыканием (таким образом, его закрытый). он имеет uid в качестве ключа.

элемент хранения затем работает на element.store("key", value") и element.retrieve("key")

и, наконец, почему это важно: events хранятся в хранилище элементов (например, Storage [5] ['events']) - выполните element.retrieve ("events") и изучите его в fireBug, если вы любопытно.

при переписывании innerHTML старый элемент перестает существовать. затем он воссоздается, но обработчик события И ссылка на функцию, которую вы связали ранее, больше не будут работать, поскольку теперь он получит NEW uid.

вот и все, надеюсь, это имеет смысл.

чтобы добавить br, просто сделайте new Element("br").inject(element) вместо этого или создайте шаблонный фрагмент для лота (самый быстрый) и добавьте 1 большой кусок, добавляя события после.

2 голосов
/ 12 мая 2011

HTML внутренне представлен структурой объекта DOM. Вроде как класс Tree в традиционных языках программирования. Если вы установили innerHTML, предыдущие узлы в родительском узле уничтожаются, новый innerHTML анализируется, и создаются новые объекты. Ссылки больше не совпадают. 

div
|-- a..

Приведенный выше объект div содержит объект Anchor как дочерний. Теперь установите переменную link1 как ссылку на адрес этого объекта Anchor. Тогда .innerHTML равен += "<br />", что означает, что все узлы div удаляются и воссоздаются динамически на основе проанализированного результата нового значения .innerHTML. Теперь старая ссылка больше не действительна, поскольку тег Anchor был воссоздан как новый экземпляр объекта.

...