jQuery not working for dynamically created input field

Question

I have script, that on press of Enter on keyboard hides $this input and generates span with value of that field to display.

    $('.work_experience .achievements').on('keypress','input', function(event){
    if (!$(this).val() && event.which == 13 ) {
        alert('Input something');
        event.preventDefault();
    }
    else if (event.which == 13) {
        event.preventDefault();
        var value = $(this).val();
        $(this).parent().append('<span><i class="fa fa-times"></i> ' + value + '</span><input type="text" class="form-control input-xs" placeholder="I did" autofocus>');
        $(this).css('display', 'none');
        $('.achievements input:last-child').focus();
    }
});

It works. But then I have button, clicking on which generates new input field. And on that, newly created input, script doesn't work anymore. Help is appreciated.

PS Script adding new set of fields

    $('.form_fields').on('click','#add_work', function(event){
    event.preventDefault();
    var field_set = '<div class="form-group work_experience">'+                            
                    '<input type="text" class="form-control input-m" id="company_name" placeholder="Company name">'+
                    '<input type="text" class="form-control input-m" id="company_place" placeholder="Company location">'+
                    '<input type="text" class="form-control input-m" id="work_period_start" placeholder="Beginnig">'+
                    '<input type="text" class="form-control input-m" id="work_period_end" placeholder="End">'+
                    '<label><input type="checkbox"> Currently</label>'+
                    '<textarea class="form-control" rows="5" placeholder="Write a few sentences about that company"></textarea>'+
                    '<input type="text" class="form-control input-m" placeholder="Your position">'+
                    '<label><strong>Achievements</strong></label>'+
                    '<div class="achievements">'+
                    '<input type="text" class="form-control input-xs" placeholder="I did">'+
                    '</div>'+
                '</div>';
    $(this).prev().after(field_set);
});

because you append it to $(this).parent(), but the delegated handlers are attached to $(this) and not to its parent. therefore the newly added inputs are placed outside of the handler's monitored scope — Banana
– Banana, Commented Jul 25, 2014 at 11:13
@SergeyDubovik yes, i will post it as an answer because its long — Banana
– Banana, Commented Jul 25, 2014 at 11:16

Balachandran · Accepted Answer · 2014-07-25 11:27:07Z

2

Use event delegation for dynamically created dom

 $(document).on('keypress','input','.form-control',function(e){

     e.stopPropagation(); // stop the bubbling  if it is there 
     alert("cal");
    // do your work

    });

Note : you were created dom element is div <div class="form-group work_experience">'+ ,it is not input field

edited Jul 25, 2014 at 11:27

answered Jul 25, 2014 at 11:20

Balachandran

9,6271 gold badge19 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sarath · Accepted Answer · 2014-07-25 11:24:59Z

0

try change from

$('.work_experience .achievements').on('keypress','input', function(event)

to

$('.work_experience .achievements').live('keypress','input', function(event)

answered Jul 25, 2014 at 11:24

sarath

5612 bronze badges

Collectives™ on Stack Overflow

jQuery not working for dynamically created input field

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related