JQuery клонирование HTML проблема, обновить DOM? - PullRequest
Новая
       7

JQuery клонирование HTML проблема, обновить DOM?

2 голосов
/ 16 сентября 2009

Мне нужна помощь экспертов javascript / jquery для решения следующей проблемы:

---- 1. этот javascript предупреждает идентификатор выбранной опции в теге select html: 

$(function(){
    $("#id_productos_list").change(
    function(){
        var op = $(this).selectedValues()
        alert(op);
     }
     );
});

---- 2. этот javascript html-код клона: 

function cloneMore(selector, type) {
    var newElement = $(selector).clone();
    var total = $('#id_' + type + '-TOTAL_FORMS').val();

    newElement.find(':input').each(function() {
        var name = $(this).attr('name').replace('-' + (total-1) + '-','-' + total + '-');
        var id = 'id_' + name;
        $(this).attr({'name': name, 'id': id}).val('').removeAttr('checked');
    });
    newElement.find('label').each(function() {
        var newFor = $(this).attr('for').replace('-' + (total-1) + '-','-' + total + '-');
        $(this).attr('for', newFor);
    });

    total++;
    $('#id_' + type + '-TOTAL_FORMS').val(total);
    $(selector).after(newElement);
}

---- это часть HTML-кода, который JS клонирует, и работает без проблем 

            <select id="id_productos_list" name="productos_list" >
              <option value="1">One</option>
              <option value="2">Two</option>
            </select>

НО только javascript # 1 работает с исходным html-кодом (оригинал для клона). клонированные другие не предупреждают выбранные параметры. Я протестировал атрибуты идентификатора отличия для каждого клонированного тега выбора, но безрезультатно.

Чего мне не хватает? Firebug отображает клонированный HTML DOM хорошо: S Нужно ли обновлять DOM после клонирования, чтобы $ ("# id productos list"). change (...) работало?

Ответы [ 2 ]

6 голосов
/ 16 сентября 2009

Вы пробовали .clone(true), который клонирует все прикрепленные обработчики? Это описано внизу документации клона .

4 голосов
/ 16 сентября 2009

Синтаксис jQuery $("#...") возвращает первый соответствующий элемент с точным идентификатором. Если вы клонируете элементы, но не различаете их по их идентификатору, этот код не будет работать так, как вы ожидаете.

Вы можете сравнить различия между следующими двумя выражениями: 

alert($("#id_productos_list").size());

... и 

alert($("[id='#id_productos_list']").size());

Первое выражение вернет либо ноль, либо единицу в зависимости от наличия элемента с идентификатором "id_productos_list" на вашей странице. Первый элемент в объявленном порядке выигрывает.

Второе выражение вернет ноль, один или несколько, в зависимости от набора всех элементов с идентификатором "id_productos_list" на вашей странице.

Также важно отметить, что не похоже, что обработчики событий копируются как часть операции clone(). Возможно, вам придется переназначить эти обработчики на новые элементы. 

var newElement = $(selector).clone(true);
...