.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);
    });

});

這是jsfiddle

Answer 1

您需要對動態添加到DOM的任何元素使用.on。

將您的jQuery更改為：

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

等等...

Answer 2

您的問題是您在document.ready函數中定義了keyup偵聽器。 此時，您克隆的元素不在DOM中，因此克隆上沒有任何偵聽器。 像這樣添加輸入克隆之后，只需移動這部分代碼即可：

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