функция привязки динамически на jQuery

Question

функция привязки динамически на jQuery

0

Я работаю над этим, и это сводит меня с ума D:

Итак, у меня есть этот код:

<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>

А также:

$(".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");
        }
    }
}

Поэтому каждый раз, когда мои "входы.txt_posologia" теряют фокус, он добавляет новую строку на мой стол. Эта работа с первым входом, определенным на моей странице, но не на новых...

Благодаря !

На всякий случай, маленькая скрипка

Mario Cares Cabezas 22 окт. 2013, в 16:38

Источник

Теги:

javascript

jquery

html

function

bind

2 ответа

3

Если под "новыми" вы подразумеваете динамически генерируемые входы, то это потому, что вам нужно делегирование событий:

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

carter 22 окт. 2013, в 12:53

1

Картер прав, но я решил добавить немного информации о том, почему. Вы присоединяете обработчик события размытия к классу .txt_posologia. Он запускается только один раз при загрузке страницы, поэтому дополнительные классы не связаны с этим событием. Таким образом, вы должны прикрепить прослушиватель на уровне документа, чтобы при изменении документа его можно было связать с событием.
Duane 22 окт. 2013, в 14:16
1

Предпочтительно я прикрепляю обработчики событий к ближайшему родителю, который будет доступен при загрузке документа, но прикрепление к документу всегда должно быть безопасным. Хорошо сказал Дуэйн
carter 22 окт. 2013, в 14:25

Ещё вопросы

Картер прав, но я решил добавить немного информации о том, почему. Вы присоединяете обработчик события размытия к классу .txt_posologia. Он запускается только один раз при загрузке страницы, поэтому дополнительные классы не связаны с этим событием. Таким образом, вы должны прикрепить прослушиватель на уровне документа, чтобы при изменении документа его можно было связать с событием.
Предпочтительно я прикрепляю обработчики событий к ближайшему родителю, который будет доступен при загрузке документа, но прикрепление к документу всегда должно быть безопасным. Хорошо сказал Дуэйн

goma · Accepted Answer · 2013-10-22T12-13-00.000Z

Вот ваш пример работы: http://jsfiddle.net/GR5sJ/

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

Для работы с такими динамическими генерируемыми полями полезно использовать jquery 'on'. Дополнительную документацию можно найти здесь: http://api.jquery.com/on/

Mucha suerte!

Святой брат ... просто пропустил один параметр ... хорошо, тогда .. leasson узнал;) +1 спасибо за ссылку. Suerte para ti también :) Грасиас Тоталес