jQuery event keyup для изменения html() другого элемента не работает должным образом

Question

Я пытаюсь изменить текст внутри <span>, когда любые данные вводятся в соответствующее поле <input>. Поэтому я использую следующий скрипт.

jQuery(".selector").live({ 
    'paste keyup input' : function() { 
     var val = $(this).val(); 
     var dest_class = $(this).attr('class') + '_' + $(this).attr('dest'); 
     $('.' + dest_class).html(val); 
    }, 
    change: function() { 
     var id = $(this).attr('id') + " option:selected"; 
     var val = $("#" + id).text(); 
     var dest_class = $(this).attr('class') + '_' + $(this).attr('dest'); 
     $('.' + dest_class).html(val); 
    } 
}); 

Код работает почти правильно. Проблема, с которой я столкнулся, - это первое событие. Когда в списке <input class="cell_value" ...> происходит какое-либо из перечисленных значений, html адресата меняется так же, как и должен, но в тот момент, когда я нажимаю снаружи или нажимаю TAB, все изменения, внесенные в пункт назначения <span>, исчезают.

Если я нажму Enter, то значение останется в пункте назначения, но только до тех пор, пока я не отредактирую вход снова.

Второе событие, то есть «изменение» работает нормально.

Любое предложение о том, что я делаю неправильно.

здесь скрипка ссылка на этот http://jsfiddle.net/k6ru4/1/

Answer 1

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

$(".selector").live({ 
    'paste keyup input change' : function() { 
     var val, $this = $(this); 

     if($this.is('select')){ 
      val = $this.find('option:selected').text(); 
     } else { 
      val = $this.val(); 
     } 

     var dest_class = $(this).attr('class') + '_' + $(this).attr('dest'); 
     $('.' + dest_class).html(val); 
    } 
}); 

Демонстрация: Fiddle

Answer 2

В обработчике изменения, вы используете .text() где вы должны были использовать .val(). Выделение после изменения содержимого приводит к тому, что текстовое поле запускает событие изменения.

Правильный код должен быть:

.... 
'change' : function() { 
    ... 
    var val = $("#" + id).val(); // val() instead of text() 
    ... 
} 
.... 

Демо: http://jsfiddle.net/k6ru4/4/

Answer 3

Используйте Append() на функцию изменения вместо HTML()

$('.' + dest_class).append(val); 

http://jsfiddle.net/k6ru4/5/