jQuery：元素在此元素后插入克隆时丢失事件

Question

我有一个下拉列表（<选择> <选项>）页面上id =“coclevel1”。如果当前选择的选项有子项目，那么我必须添加新的下拉列表并填充子项目。下一个下拉列表应该命名为“coclevel2”，“coclevel3”等。我必须为每个添加的下拉列表执行此事件。在 “$（文件）。就绪” 我放在：

$('[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; 
} 

添加新的下拉框和灌装工作正常，但此后以前下拉框丢失事件，而当我试图改变所选的选项没有出现（浏览器不显示警报（currElement）;//用于调试）。请帮助解决这个问题。

Answer 1

这里不需要使用数字标识。你应该能够被绕过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; 
} 

Answer 2

我不确定我明白你在问什么，但是如果你想要用元素克隆jQuery事件处理程序，那么你需要使用.clone(true)而不是clone()。有关更多信息，请参阅here。