CODEWITHSUNDEEP
javascriptjqueryhtmlfunctionbind
Mario Cares Cabezas
Mario Cares Cabezas

Reputation: 307

bind function dynamically on jQuery

I'm been working on this and it's driving me crazy D:

So, i have this code:

<table class="table table-condensed table-bordered table-hover" id="tbl_indicaciones">
<thead><tr>
<th>INDICACIÓN FARMACOLÓGICA</th><th>POSOLOGÍA</th><th>REALIZADO</th>
</tr></thead>
<tbody>
<tr>
<td><input type="text"></td>
<td><input type="text" class="txt_posologia"></td>
<td></td>
</tr>
</tbody>
</table>

And:

$(".txt_posologia").blur(function(){
    guardarIndicacion($(this));
});

var guardarIndicacion = function(elemento){
    //REVISAR QUE LOS CAMPOS TENGAN VALORES
    var indicacion = $(elemento).parent().parent().find('td:eq(0)').find('input:eq(0)');
    if(indicacion.val() == "" || $(elemento).val() == ""){
        alert("Debe ingresar ambos campos");
        indicacion.focus();
    }else{
        //REVISO SI SOY EDITABLE
        if($(elemento).attr("data-editable") != "false"){
            //HAGO ALGO
            //AGREGO LINEA A TABLA
            try{$("#tbl_indicaciones").find('tbody').
                append($('<tr>').
                    append($('<td>').html("<input type=\"text\">")).
                    append($('<td>').html("<input type=\"text\" class=\"txt_posologia\">").on('blur', function() {guardarIndicacion($(this))}))
                );}catch(e){alert(e.toString)}
            //ME HAGO NO EDITABLE
            $(elemento).attr("data-editable", "false");
        }
    }
}

So, everytime that my "inputs .txt_posologia" lost focus it add a new line on my table. This work with the first input defined on my page, but it doesn't on the new ones ...

Thanks !

Just in case, a little fiddle

Upvotes: 0

Views: 110

Answers (2)

goma
goma

Reputation: 945

Here is your example working: http://jsfiddle.net/GR5sJ/

$( document ).on( "blur", ".txt_posologia", function() {
  guardarIndicacion($(this));
});

For handling this kind of dynamic generated fields it's good to use the jquery 'on' For more documentation here: http://api.jquery.com/on/

Mucha suerte!

Upvotes: 2

carter
carter

Reputation: 5432

If by the "new ones" you mean dynamically generated inputs, then it's because you need event delegation:

$(document).on('blur', '.txt_posologia', function(){
    guardarIndicacion($(this));
});

Upvotes: 3

Related Questions