Обновление JQuery динамически добавляется в поле ввода Поле ввода

Ниже приводится сценарий, с которым я экспериментирую. В основном я ищу, чтобы обновить динамически добавленные промежутки в div предварительного просмотра, когда есть изменение значения в полях ввода. Значение ввода доступно в предупреждении, но, похоже, оно не обновляет диапазон. Мне также странно, что если вы просто выберите диапазон с динамически сгенерированным идентификатором и предупредите текст, что он не имеет значения. Есть предположения? Я избегаю использовать нокаут для чего он стоит.

http://jsfiddle.net/Wr3t7/4/

$(document).ready(function(){
 $(".project").each(function(index, value){
 var titleElem = $(this).find(':nth-child(1)');
 var projId = "#" + titleElem.attr('id') + "_Prev";

 $("#previews").append("<span id="" +="" projid="" ""="">" + titleElem.val() + "</span>");

 titleElem.*****(function(){
 alert($(this).val());
 $(projId).text($(this).val()); 
 });
 });
 });

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

3 ответа

У вас есть две проблемы:

  1. Вы устанавливаете id добавленных #foo в #foo (т.е. включая хеш как часть идентификатора)
  2. Квадратные скобки в id, хотя и действительны в HTML 5, запутывают jQuery, я думаю

если вы не можете изменить идентификатор на входах, по крайней мере, изменить их на пролетах

$(document).ready(function(){
 $(".project").each(function(index, value){
 var titleElem = $(this).find(':nth-child(1)');
 var projId = titleElem.attr('id').replace('[', '_').replace(']', '_') + "_Prev";

 $("#previews").append("<span id="" +="" projid="" ""="">" + titleElem.val() + "</span>");

 titleElem.*****(function(){
 alert($(this).val());
 $('#' + projId).text($(this).val()); 
 });
 });
});

Рабочая скрипка


Немногие работы arrounds

1) [] не разрешены в идентификаторах, которые у вас есть, поскольку они зарезервированы для селекторов атрибутов. 2) установка # во время инициализации строковой переменной недопустима. 3) Установите текст в Непосредственно вам не понадобится писать # для выбора объекта .

Таким образом, комбинация всего вашего кода должна выглядеть так:

Как вы сказали, что разметка генерируется кодом MVC, вы можете создавать новые идентификаторы диапазона с использованием выражения регулярного выражения

var newProjIdID = projId.replace(/[^\w\s]/gi, ''); // Generating valid ID

Таким образом, окончательный ответ будет следующим:

JQuery

$(".project").each(function(index, value){
 var titleElem = $(this).find(':nth-child(1)');
 var projId = titleElem.attr('id') + "_Prev";
 var newProjIdID = projId.replace(/[^\w\s]/gi, ''); // Generating valid ID
 $("#previews").append("<span id="" +="" ""="">" + titleElem.val() + "</span>");

 titleElem.*****(function(){
 alert($(this).val());
 $("#" + ID).text($(this).val()); 
 });
 });

Демо-версия скрипта


Селекторы jquery - это довольно регулярные выражения, поэтому вам нужно избегать ваших скобок:

http://jsfiddle.net/Wr3t7/14/

<div id="projects">
 <div>
 
 </div>

 <div>
 
 </div>
 </div>

 <div id="previews">

 </div>


$(document).ready(function(){
 $(".project").each(function(index, value){
 var titleElem = $(this).find(':nth-child(1)');
 var projId = titleElem.attr('id') + "_Prev";

 $("#previews").append("<span id="" +="" projid="" ""="">" + titleElem.val() + "</span>");

 titleElem.*****(function(){
 $("#" + projId.replace('[', '\\[').replace(']','\\]')).text($(this).val()); 
 });
 });
});

licensed under cc by-sa 3.0 with attribution.