복제 된 입력 필드에서 .keyup()을 사용합니다.

Question

복제 입력 필드를 편집 할 때 새 값을 텍스트 문자열로 외부 div에 넣으려고합니다. 미리 도움을 주셔서 감사합니다!

function cloneClue(target){ 
    clueCount++; 
    var myClueField = $(target).prev().find('#textClue'); 
    var myClone = myClueField.clone().attr('id','textClue' + clueCount); 
    var clueName = myClone.find('.clueName'); 
    var clueContent = myClone.find('.clueContent'); 
    var clueRemove = myClone.find('.clueRemove'); 
    var clueNamePreview = myClone.find('.clueNamePreview'); 
    var clueContentPreview = myClone.find('.clueContentPreview'); 

    clueName.attr('name', "clueName" + clueCount); 
    clueName.attr('id', "clueName" + clueCount); 
    clueContent.attr('name', "clueContent" + clueCount); 
    clueContent.attr('id', "clueContent" + clueCount); 
    clueRemove.attr('id', "clueRemove" + clueCount) 

    clueNamePreview.attr('id', "clueNamePreview" + clueCount); 
    clueContentPreview.attr('id', "clueContentPreview" + clueCount); 

    clueRemove.click(function() { 
     $(this).parent().remove(); 
    }); 
    $('#clueField').append(myClone); 
    myClone.show(); 
} 
var clueCount = 0; 

$(document).ready(function() { 

    $("#addTextClue").click(function(){ 
     cloneClue(this) 
    }); 

    $('.clueName').keyup(function(){ 
     var nameVal = $(this).val(); 
     $(this).parent().find('.clueNamePreview').html(nameVal); 
    }); 

    $('.clueContent').keyup(function(){ 
     var contentVal = $(this).val(); 
     $(this).parent().find('.clueContentPreview').html(contentVal); 
    }); 

}); 

다음은 동적으로 DOM에 추가되는 모든 요소에 대한 CSTE 연구진를 사용하는 데 필요한 jsfiddle

Answer 1

입니다.

변경하여 jQuery를에 :

$(document).on("keyup", ".clueName", function() { 
    .... 
} 

등 ...

Answer 2

귀하의 문제는 당신이 당신의 document.ready 기능에 청취자의 keyup 정의하는 것입니다. 이 시점에서 복제 된 요소는 DOM에 없으므로 클론에 연결된 Listener가 없습니다. 그냥 이런 식으로 당신이 당신의 입력 클론을 추가 후 바로 코드의이 부분을 이동 :

http://jsfiddle.net/8yv5x7dg/2/