keyup не работает на динамически добавленном поле

Question

keyup не работает на динамически добавленном поле

0

У меня есть форма с динамически добавленными полями. Я хочу отображать типизированный контент в одном входе в другое field со сценарием следующим образом:

<script>
  $(document).ready(function () {
    $('#field').keyup(function(){
      $('#target').html($(this).val());
    });
    $('#field_2').keyup(function(){
      $('#target2').html($(this).val());
    });

  });
</script>

пока все работает над первой проблемой поля со вторым, потому что введенные символы не target2 метке target2.

Вот демонстрация JSFidle

Может ли кто-нибудь дать мне подсказку, как я могу сделать текст введенным в 1-ое добавленное входное шоу во 2-м лейбле?

Mithrand1r 18 фев. 2014, в 13:58

Источник

Теги:

jquery

html

5 ответов

1

Попробуйте делегировать так:

$('form').on("keyup", "#field", function(){..});

reyaner 18 фев. 2014, в 10:33

0

Это действительно крутая проблема. Однако вам нужно использовать событие.on, точнее, решение вашей проблемы:

$('#buildyourform').on("keyup", ".textComesFromThisInput", function(){
    var index = $('#buildyourform').index($(this).parent());
    var targetDiv = $(':nth-child('+index+')');
    targetDiv.find('label').html($(this).val());
});


<div id="buildyourform">form</div>
    <div class="parentOfTextInputs">
        <div>
            <input type="text" class="textComesFromThisInput">
        </div>
        ...
    </div>
    <div class="parentOfTargetTextLabelsAndInputs">
        <div>
            <label class="textGoesInThisLabel"></label>
            <input type="text" class=".thisInputDoesNothing">
        </div>
        ...
    </div>
</div>

Чтобы все js вам нужно было написать, если вы создадите свой html. Когда вы нажимаете стрелку для добавления новых элементов, вы просто добавляете div с меткой и вводом в нее. В.parentOfTargetTextLablesAndInputs. Вы проверяете, какие входные данные соответствуют метке, используя: nth-child()

Это может работать для бесконечного количества элементов, добавленных этой стрелкой без дополнительных js.

Повеселись.

Andrei Cristian Prodan 18 фев. 2014, в 11:33

0

Это не будет работать для динамически добавленных объектов. Используйте вместо этого:

$('#field_container').on("keyup", "#field", function(){
  $('#target').html($(this).val());
});

Liberat0r 18 фев. 2014, в 11:10

-1

Пытаться

$(document).on("keyup","#field2_2", function() {
     // do something    
});

Balachandran 18 фев. 2014, в 10:26

Ещё вопросы

Jai · Accepted Answer · 2014-02-18T10-18-00.000Z

Попробуйте делегировать событие статическому ближайшему родительскому .on() методом .on():

$('#buildyourform').on('keyup', '#field_2', function(){
    $('#target2').html($(this).val());
});

keyup не работает на динамически добавленном поле

5 ответов

демо @Fiddle

Ещё вопросы