Как вы клонируете события и данные для клонирования, но применяете их к новейшему клону?

Question

Вы можете клонировать элемент с его событиями и данными, но затем события по-прежнему применяются к исходному объекту вместо нового объекта.

Я использовал jsfiddle, чтобы продемонстрировать проблему: http://jsfiddle.net/VZZG4/

Чтобы воспроизвести: 1. Нажмите кнопку «Клон». 2. В новом текстовом поле введите «Новый». 3. Нажмите кнопку «Новый клон». Фактический результат: Самый новый клон говорит «Тест». Ожидаемый результат: Самый новый клон говорит «Новый "

Вопрос: Как вы клонируете события и данные для клонирования, но применяете их к новейшему клону?

Answer 1

Вы делаете ошибку, чтобы клонировать объекты с идентификаторами. В большинстве браузеров, если у вас есть несколько элементов с одинаковым идентификатором, будет возвращен первый элемент. Таким образом, $('#container') всегда будет возвращать первый со значением Test.

Дайте элементы, которые должны быть клонированы вместо классов.

HTML:

<div id="wrap">
    <div class="container">
        <input type="text" class="edit" value="Test">
        <input type="button" class="clone" value="Clone">
    </div>
</div>

JavaScript:

$(document).ready(function() {
    $('.clone').click(function() {
        $(this).closest('.container').clone(true).appendTo('#wrap');
    });
});

Проверьте модифицированную версию вашего кода http://jsfiddle.net/VZZG4/2/

Ссылка: closest

Answer 2

используйте closest () для клонирования ожидаемого элемента ...

$(document).ready(function() {
    $('#clone').click(function() {
        $(this).closest('#container').clone(true).appendTo('#wrap');
    });
});

обновленная скрипка

и я предлагаю вам использовать class вместо id. Дубликат id не является верным html.