access to appended/prepended elements

Question

I have a form which has a "phone" field and a button of "add another phone number".

<div class="form-group form-inline phone">
    <label class="col-sm-2 control-label">Phone</label>
    <div class="col-sm-10">
        <input type="text" class="form-control" id="phonetype1" placeholder="Type of Phone">
        <input type="text" class="form-control" id="number1" placeholder="Write here your phone number">
    </div>
</div>
<span id="newPhone"> Add a phone number</span>

When I click this button, another group of fields shows to fill with another phone number:

$("#newPhone").on('click',function(){
    var numItems = $('.phone').length +1;
    var newPhone=  '<div class="form-group form-inline phone">';
    newPhone+= '<label class="col-sm-2 control-label"></label>';
    newPhone+= '<div class="col-sm-10">';
    newPhone+= '<input type="text" class="form-control" id="phonetype'+numItems+'" placeholder="Type of Phone">';
    newPhone+= '<input type="text" class="form-control" id="number'+numItems+'"" placeholder="Write here your phone number">';
    newPhone+= '</div> </div>';
    $(this).before(newPhone);
});

But then I want to access to these new fields in order to validate their data:

$(function()
{
    $("input").on('blur',function(){
        var formElementId = $(this).attr("id");
        validateField(formElementId); //This function works, for sure
    });
});

This function is not executed for the new fields. I think this is because the DOM tree is not updated so my jQuery function does not know about these new input fields.

How can I access them even if they are not in the DOM tree? if is not possible, or if it's better, how can I insert my fields into the DOM tree?

Thank you all :)

EDIT:

5 more minutes of research and I've nailed the solution

I misused on(), here's how to delegate correctly the blur event

$("form").on('blur','input',function(){
    var formElementId = $(this).attr("id");
    validateField(formElementId); //This function works, for sure
});

You need to delegate the blur event to a static parent so that the new elements will trigger the event. — Patrick Evans, Apr 06 '14 at 17:44
possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Patrick Evans, Apr 06 '14 at 17:45
... trouble is, blur doesn't bubble, therefore can't be delegated! — Roamer-1888, Apr 06 '14 at 17:48
You need to look at [http://api.jquery.com/clone/](http://api.jquery.com/clone/). — Roamer-1888, Apr 06 '14 at 17:50
@Roamer-1888, are you sure? http://jsfiddle.net/5Ep38/, jquery works around the blur event not bubbling by using the focusout event — Patrick Evans, Apr 06 '14 at 17:53
@PatrickEvans sorry I forgot, native focus and blur don't bubble but jQuery maps focus and blur to its own synthetic focusin and focusout internally. The [documentation](https://api.jquery.com/on/) says "for consistency and clarity, use the bubbling event type names." — Roamer-1888, Apr 06 '14 at 17:58

Stphane · Accepted Answer · 2014-04-06T18:09:40.847

0

Event delegation is the key, see on() documentation method

PLUS ..

since blur event does not bubble up, you could try with "focusout event"

Doc:

The focusout event is sent to an element when it, or any element inside of it, loses focus. This is distinct from the blur event in that it supports detecting the loss of focus on descendant elements (in other words, it supports event bubbling).

edited Apr 06 '14 at 18:09

answered Apr 06 '14 at 17:54

Stphane

3,368
5
32
47

Thanks for the tip on focusout. Looks better than blur in my case. – jdlcgarcia Apr 06 '14 at 18:27
You're welcome ! And yes you're right, I personally never use blur event `:p` – Stphane Apr 06 '14 at 18:31

access to appended/prepended elements

1 Answers1