Input text with jQuery

Asked

Viewed 288 times

1

'Cause I can’t type text into input ".task-act" which was created with the jQuery?

$(function(){
    function onTarefaDeleteClick(){
        $(this).parent('.tarefa-item').hide('slow', function(){
            $(this).remove();
        });
    }
    $('.tarefa-delete').click(onTarefaDeleteClick);
});
$(function(){
    function onTarefaItemClick(){
        var text = $(this).children('.tarefa-texto').text();
        var html = '<input type="text" ' + 'class="tarefa-edit" value="' + text + '">';
        $(this).html(html);
        $('.tarefa-edit').keydown(onTarefaEditKeydown);
    }
    $('.tarefa-item').click(onTarefaItemClick); //
});
function onTarefaEditKeydown(event){
    if(event.which === 13){
        savePendingEdition($(this));
    }
}
function savePendingEdition(tarefa){
    console.log('...');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="todo">
    <h2>TODO List</h2>
    <input type="text" id="tarefa">
    <div id="tarefa-lista">
        <div class="tarefa-item">
            <div class="tarefa-texto">Comprar pão</div>
            <div class="tarefa-delete"></div>
            <div class="clear"></div>
        </div>
    </div>
</div>

javascript jquery

  • What is the function for onTarefaEditKeydown? If you are at the top input and give a tab to the created input it receives text normally, but if you click on the input it no longer receives the focus.

  • .keydown does not usually work with elements dynamically created, I suggest to exchange for $(document).on('keydown', ".tarefa-edit",onTarefaEditKeydown) . Test and inform if it worked, I could not test because there is not a testable example in your question

1 answer

1


What is happening that you associated the function onTarefaItemClick to the "click" tag event <div class="tarefa-item">, then how much you click on the box <input type="text" class="tarefa-edit" value=""> that is within the tag <div class="tarefa-item"> the event "onTarefaItemClick" and called again recreating the text box, you disable event onclick tag <div class="tarefa-item"> after creation of the text box the problem will not occur:

$(function(){
    function onTarefaItemClick(){
        $('.tarefa-item').unbind();
        var text = $(this).children('.tarefa-texto').text();
        var html = '<input type="text" ' + 'class="tarefa-edit" value="' + text + '">';
        $(this).html(html);
        $('.tarefa-edit').keydown(onTarefaEditKeydown);
    }
    $('.tarefa-item').click(onTarefaItemClick); //
});

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.