.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/