Добавление значения в текстовые поля в Bootstrap3

Question

пирог ПРОБЛЕМА

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

Попсор правильно показывает данные в текстовых полях.

Пытаюсь

<!-- change dob1 content --> 
<div id="dob1_iq" style="display: none"> 
    <input type="text" id="iq__dob1-day" value=""> 
    <input type="text" id="iq__dob1-month" value=""> 
    <input type="text" id="iq__dob1-year" value=""> 
</div> 

Я знаю, что данные там, как я вижу в журнале консоли:

$('.dob1_iq').popover({ 
    html : true, 
    content: function() { 
     return $('#dob1_iq').html(); 
    } 
}) 
.on('show.bs.popover', function() { 
    console.log('day is ' + $('#qq__dob1-day').val()); // <- this shows value is there in console 
    $('#iq__dob1-day').val($('#qq__dob1-day').val()); // stays blank 
    $('#iq__dob1-month').val($('#qq__dob1-month').val()); // stays blank 
    $('#iq__dob1-year').val($('#qq__dob1-year').val()); // stays blank 
}); 

Есть ли способ сделать это?

в действии

Here's a bootply to see it in action

UPDATE

Думая, что это может быть потому, что элементы не в DOM Я также попытался следующие, но это тоже не получилось:

$(document).find("#iq__dob1-day").val($('#qq__dob1-day').val()); 

UPDATE 2

Я проверил, если элемент я пытаюсь добавить значение на самом деле существует, и это делает:

// this gives "does it exist 1"  
console.log('does it exist ' + $('#iq__dob1-day').length); 

Answer 1

Странно. Не могу объяснить, но если вы хотите работать, вы можете использовать attr

Это прекрасно работает:

$('#iq__dob1-day').attr("value", $('#qq__dob1-day').val()); // stays blank 
$('#iq__dob1-month').attr("value", $('#qq__dob1-month').val()); // stays blank 
$('#iq__dob1-year').attr("value", $('#qq__dob1-year').val()); // stays blank 

EDIT: val() не работает, как ожидалось идентификаторы дублируются. Я добавил $('#dob1_iq').show();, и это объясняет, что происходит. http://www.bootply.com/B6ULMiPGbc#

Answer 2

val() получает или задает свойство объекта 'value'.properties wont render in html. поэтому при использовании .html() значения элемента будут пустыми.

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

$('.dob1_iq').popover({ 
    html : true, 
    content: function() { 
    return $('#dob1_iq').html(); 
} 
}) 
.on('shown.bs.popover', function() { 

$('.popover-content #iq__dob1-day').val($('#qq__dob1-day').val()); // stays blank 
$('.popover-content #iq__dob1-month').val($('#qq__dob1-month').val()); // stays blank 
$('.popover-content #iq__dob1-year').val($('#qq__dob1-year').val()); // stays blank 
}); 

.attr() будет управлять значением атрибута в DOM так .html() возвращает элемент со значением в качестве значения атрибута

$('.dob1_iq').popover({ 
html : true, 
content: compile 
}) 

function compile() 
{ 
    $('#dob1_iq #iq__dob1-day').attr('value',$('#qq__dob1-day').val()); 
    $('#dob1_iq #iq__dob1-month').attr('value',$('#qq__dob1-month').val()); 
    $('#dob1_iq #iq__dob1-year').attr('value',$('#qq__dob1-year').val()); 
    return $('#dob1_iq').html() 
}