My<cod/>.net
Как поддерживать правильное событие Javascript после использования cloneNode (true)
У меня есть элемент формы, который содержит несколько строк входных данных. Подумайте о каждой строке как об атрибутах нового объекта, который я хочу создать в своем веб-приложении. Кроме того, я хочу иметь возможность создавать несколько новых объектов в одном посте HTTP. Я использую встроенный метод Javascript cloneNode (true) для клонирования каждой строки. Проблема в том, что каждая входная строка также имеет ссылку удаления, прикрепленную к ее onclick-событию:
// prototype based
<div class="input-line">
<input .../>
<a href="#" onclick="$(this).up().remove();"> Remove </a>
</div>
При нажатии на ссылку удаления клонированной входной линии также удаляются все входные линии, которые были клонированы из того же объекта dom. Можно ли повторно привязать объект "this" к соответствующему тегу привязки после использования cloneNode (true) на указанном выше элементе DOM?
Не ставьте обработчик на каждую ссылку (это действительно должна быть кнопка, BTW). Используйте событие bubbling для обработки всех кнопок с помощью одного обработчика:
formObject.onclick = function(e)
{
e=e||event; // IE sucks
var target = e.target||e.srcElement; // and sucks again
// target is the element that has been clicked
if (target && target.className=='remove')
{
target.parentNode.parentNode.removeChild(target.parentNode);
return false; // stop event from bubbling elsewhere
}
}
+
<div>
<input…>
<button type=button class=remove>Remove without JS handler!</button>
</div>
Вы можете попробовать клонирование с помощью метода innerHTML или микса:
var newItem = $(item).cloneNode(false);
newItem.innerHTML = $(item).innerHTML;
Также: я думаю, что cloneNode не клонирует события, зарегистрированные с addEventListener. Но события IE и attachEvent клонируются. Но я могу и ошибаться.
Я проверил это в IE7 и FF3, и это сработало, как и ожидалось - должно быть, что-то еще происходит.
Вот мой тестовый сценарий:
<div id="x">
<div class="input-line" id="y">
<input type="text">
<a href="#" onclick="$(this).up().remove();"> Remove </a>
</div>
</div>
<script>
$('x').appendChild($('y').cloneNode(true));
$('x').appendChild($('y').cloneNode(true));
$('x').appendChild($('y').cloneNode(true));
</script>
Чтобы отладить эту проблему, я бы завернул ваш код
$(this).up().remove()в функции:
function _debugRemoveInputLine(this) {
debugger;
$(this).up().remove();
}Это позволит вам узнать, что $(this) возвращается. Если он действительно возвращает несколько объектов (несколько строк), то вы определенно знаете, где искать-в коде, который создает элемент с помощью cloneNode. Есть ли у вас какие-либо изменения результирующего элемента (например, изменение атрибута id)?
Если бы у меня была проблема, которую вы описываете, я бы подумал о добавлении уникального IDs к элементу запуска и элементу "line".
Похоже, вы используете jQuery? Он имеет метод для клонирования элемента с событиями: http://docs.jquery.com/Manipulation/clone#true
EDIT: Ой, я вижу, вы используете прототип.