Jquery .keypress对动态添加的输入

Question

我目前正在通过.click事件添加输入,然后想要收听此输入上发生的任何按键.但是,附加后不会触发任何事件(即模糊,按键,焦点).有没有人有什么建议？提前致谢!

$("#recipientsDiv").click(function(){
    $(this).append('< input type="text" id="toInput" class="inlineBlockElement" style="border:0px none #ffffff; padding:0px; width:20px; overflow:hidden;" />')
    $("#toInput").focus();
});
$("input").keypress(function(e){
    var inputStr = $(this).html();
    $("#inputCopier").text(inputStr);
    var newWidth = $("#inputCopier").innerWidth;
    $(this).css("width", newWidth);
});
$("#toInput").blur(function(){
    $("#toInput").remove();
});

我也尝试过.keyup .keydown,它们不起作用.

Answer 1

您的keypress处理程序仅添加到添加它时存在的元素.

您需要调用该live方法将其添加到与选择器匹配的每个元素,无论何时添加它.

例如:

$("input").live('keypress', function(e){
    var inputStr = $(this).html();
    $("#inputCopier").text(inputStr);
    var newWidth = $("#inputCopier").innerWidth;
    $(this).css("width", newWidth);
});

Answer 2

为了捕获blur/ focus事件,为什么不在将它添加到DOM之前将处理程序添加到创建的元素中？

$('#recipientsDiv').click (function() 
{
    $('< input type="text" id="toInput" class="inlineBlockElement" style="border:0px none #ffffff; padding:0px; width:20px; overflow:hidden;" />')
        .keypress (function (e) { ... })
        .blur (function (e) { $(this).remove () })
        .appendTo ($(this))
        .focus ()
    ;
});