CODEWITHSUNDEEP
javascriptjquery
Lelio Faieta
Lelio Faieta

Reputation: 6663

append to the container div

I have a HTML like this:

<fieldset>
    <legend>Incassi previsionali</legend>
    <div class="sez-form">
        <table id="inc_prev">
        <tr>
            <td>
                <label>Mese: </label>
                <select name="mese[]" id="mese[]">
                    <option value="1">Gennaio</option>
                    <option value="2">Febbraio</option>
                    <option value="3">Marzo</option>
                    <option value="4">Aprile</option>
                    <option value="5">Maggio</option>
                    <option value="6">Giugno</option>
                    <option value="7">Luglio</option>
                    <option value="8">Agosto</option>
                    <option value="9">Settembre</option>
                    <option value="10">Ottobre</option>
                    <option value="11">Novembre</option>
                    <option value="12">Dicembre</option>
                </select>
            </td>
            <td>
                <label>Anno: </label>
                <select name="anno[]" id="anno[]">
                    <option value="<?php echo date("Y")-1; ?>"><?php echo date("Y")-1; ?></option>
                    <option value="<?php echo date("Y"); ?>" selected="selected"><?php echo date("Y"); ?></option>
                    <option value="<?php echo date("Y")+1; ?>"><?php echo date("Y")+1; ?></option>
                    <option value="<?php echo date("Y")+2; ?>"><?php echo date("Y")+2; ?></option>
                    <option value="<?php echo date("Y")+3; ?>"><?php echo date("Y")+3; ?></option>
                    <option value="<?php echo date("Y")+4; ?>"><?php echo date("Y")+4; ?></option>
                    <option value="<?php echo date("Y")+5; ?>"><?php echo date("Y")+5; ?></option>
                    <option value="<?php echo date("Y")+6; ?>"><?php echo date("Y")+6; ?></option>

                </select>
            </td>
            <td><label>Percentuale: </label><input value="" size="15" maxlength="14" class="importo" name="percent[]" type="text"/>%</td>
            <td><img class="addRow" src="../images/plus.png"></td>
        </tr>
    </table>
    </div>
</fieldset>

When I focus the .importo input and then focus it out I want to append something to the container div (at bottom). So I tried:

$(document).on('blur','.importo',function(){
    $(this).parents().eq(2).append('<p>Qui le singole previsioni</p>');
});

but this will add the text to all the parent elements up to the third level. How to add it only at the bottom of the div? Also, should I use .one to fire this only once? I am actually using on since user can add as many of these fieldset as necessary and for each fieldset I want to fire it only once

Here is a fiddle

Upvotes: 2

Views: 106

Answers (2)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

Use closest() instead of parents():

$(document).on('blur','.importo',function(){
    $(this).closest("div.sez-form").append('<p>Qui le singole previsioni</p>');
});

Upvotes: 3

Rory McCrossan
Rory McCrossan

Reputation: 337560

Use closest() to target the specific div you want to append to. Try this:

$(document).on('blur','.importo',function(){
    $(this).closest('.sez-form').append('<p>Qui le singole previsioni</p>');
});

Working example

Upvotes: 3

Related Questions