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

Для того, чтобы захватить 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 ()
    ;
});

Answer 2

Ваш keypress Обработчик добавляется только к тем элементам, которые существуют, когда вы его добавляете.

Вам нужно позвонить live метод, чтобы добавить его к каждому элементу, который соответствует селектору, независимо от того, когда он был добавлен.

Например:

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

Answer 3

В ответ на ваш комментарий:

Как вы заметили, live метод не поддерживает blur событие.

В качестве обходного пути вы можете вручную добавлять обработчик каждый раз, когда добавляете элемент, например так:

$("#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()
        .blur(function(){
            $("#toInput").remove();
        });
});

Answer 4

Ты можешь попробовать

$("input").live("keypress", function (e) { 
    alert(e.keyChar);
});