jQuery: элемент потерял событие при вставке клона после этого элемента

Question

У меня есть один выпадающий список ( ) на странице с id = "coclevel1". Если у текущей выбранной опции есть дочерние элементы, тогда я должен добавить новый выпадающий список и заполнить его дочерними элементами. Следующие выпадающие списки должны называться «coclevel2», «coclevel3» и т. Д. Я должен сделать это событие для каждого добавленного выпадающего списка. В «$ (document) .ready» я поместил:

$('[id^=coclevel]').live('change', function() {
    var currElement = $(this).attr('id');
    alert(currElement); //for debug
    cleanUpCocOptionsAfter(currElement);
    renderSubItemsOf(currElement);
});

"renderSubItemsOf (currElement);" сделать запрос к БД и, если данные не пусты, добавить новый выпадающий список и заполнить его.

function cleanUpCocOptionsAfter(currElement) {
    var num = $('.cocItems').length;
    var currNum = parseInt(currElement.substring(8, currElement.length));
    for (var i = currNum + 1; i <= num; i++) {
        $('#coclevel' + i).remove();
        $('#cocBr' + i).remove();
    }
}

function renderSubItemsOf(currElement) {
    var parentId = $('#' + currElement + ' option:selected').val();
    $.getJSON('getchildrenof/' + parentId,
            function() {

            }).success(function(data) {
                var len = data.length;
                if (len > 0) {
                    var newElemSelector = '#' + addCocOptionAfter(currElement);
                    for (var i = 0; i < len; i++) {
                        $(newElemSelector).append($("<option></option>").attr("value", data[i].id).text(data[i].description));
                    }
                } else {
                    //not developed yet
                }
            });
}

function addCocOptionAfter(currElement) {
    // how many "duplicatable" input fields we currently have
    var num = $('.cocItems').length;
    var currNum = parseInt(currElement.substring(8, currElement.length));
    var currElemSelector = '#' + currElement;
    // the numeric ID of the new input field being added
    var newNum = new Number(num + 1);

    // create the new element via clone(),
    //and manipulate it's ID using newNum value
    var newElemId = 'coclevel' + newNum;

    var newElem = $(currElemSelector).clone().attr('id', newElemId).empty();
    $(newElem).append($("<option></option>").attr("value", -1).text('-- Select one --'));

    // insert the new element after the last "duplicatable" input field
    $(currElemSelector).after(newElem);
    $(currElemSelector).after('<br/>').attr('id', 'cocBr' + newNum);

    return newElemId;
}

Добавление нового раскрывающегося списка и заполнение работает нормально, но после этого предыдущее раскрывающееся окно теряет событие, и при попытке изменить выбранный параметр ничего не появляется (браузер не показывает alert (currElement); // для отладки) , Пожалуйста, помогите решить эту проблему.

Answer 1

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

Answer 2

Вам не нужно использовать числовые идентификаторы здесь. Вы должны быть в состоянии сделать это более эффективно, передавая сами объекты DOM:

$('.cocItems').live('change', function() {
    cleanUpCocOptionsAfter(this);
    renderSubItemsOf(this);
});

function cleanUpCocOptionsAfter(currElement) {
    $(currElement).nextAll('.cocItems').remove();
}

function renderSubItemsOf(currElement) {
    var parentId = $(currElement).val();
    $.getJSON('getchildrenof/' + parentId, function(data) {
        var len = data.length;
        if (len > 0) {
            addCocOptionAfter(currElement, data)
        } else {
            //not developed yet
        }
    });
}

function addCocOptionAfter(currElement, data) {
    var newElem = $('<select />').addClass('cocItems');
    $('<option />')
        .attr('value', -1)
        .text('-- Select one --')
        .appendTo(newElem);

    $.each(data, function() {
         $('<option />')
             .attr('value', this.id)
             .text(this.description)
             .appendTo(newElem);
    });
    newElem.insertAfter(currElement);
    return newElem;
}