Как поддерживать правильное событие Javascript после использования cloneNode (true)

Question

У меня есть элемент формы, который содержит несколько строк входов. Подумайте о каждой строке как атрибутах нового объекта, который я хочу создать в своем веб-приложении. И я хочу иметь возможность создавать несколько новых объектов в одном HTTP POST. Я использую встроенный метод cloneNode (true) Javascript для клонирования каждой строки. Проблема заключается в том, что каждый входной линии также имеет связь удаления, прикрепленную к его OnClick-событию:

// prototype based 
<div class="input-line"> 
    <input .../> 
    <a href="#" onclick="$(this).up().remove();"> Remove </a> 
</div> 

Когда ссылка высылки клонированного входа-Лайн нажата, она также удаляет любую входную-линию, которые были клонированы из тот же объект dom. Можно ли переустановить объект «this» на соответствующий тег привязки после использования cloneNode (true) на вышеупомянутом элементе DOM?

Answer 1

Не помещайте обработчик на каждую ссылку (это действительно должна быть кнопка, BTW). Используйте event 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> 

Answer 2

Похоже, вы используете jQuery? Он имеет метод клонирования элемента с событиями: http://docs.jquery.com/Manipulation/clone#true

EDIT: Ой, я вижу, вы используете Prototype.

Answer 3

Вы можете попробовать клонировать с помощью метода innerHTML, или смесь:

var newItem = $(item).cloneNode(false); 
newItem.innerHTML = $(item).innerHTML; 

Также: Я думаю, что cloneNode не клонировать события, зарегистрированные с addEventListener. Но IE attachEvent события являются клонированы. Но я могу ошибаться.

Answer 4

Я тестировал это в 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> 

Answer 5

Для отладки этой проблемы, я бы обернуть код

$(this).up().remove()

в функции:

function _debugRemoveInputLine(this) { 
    debugger; 
    $(this).up().remove(); 
}

Это позволит вам найти из чего возвращается $ (this). Если он действительно возвращает более одного объекта (несколько строк), то вы определенно знаете, где искать - в коде, который создает элемент, используя cloneNode. Вы производите какую-либо модификацию результирующего элемента (т. Е. Изменяя атрибут id)?

Если у меня возникла проблема, которую вы описываете, я бы рассмотрел возможность добавления уникальных идентификаторов к элементу запуска и элементу «строка».

Answer 6

Первый ответ является правильным.

Pornel неявно предлагает наиболее кросс-браузерное и комплексное агностическое решение.

Не протестировали его, но концепция будет работать в этих динамических ситуациях, связанных с событиями.