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

更新

认为这可能是因为元素不在DOM中我也尝试了以下但是也失败了：

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

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

编辑：val()无法正常工作，因为ID已重复。我已添加$('#dob1_iq').show();，这解释了发生了什么：http://www.bootply.com/B6ULMiPGbc#

Answer 2

val（）获取或设置对象的属性“value”.properties不会在html中呈现。所以当我们使用.html（）时，element的值将为空。

一种方法是在弹出窗口对用户可见后更新popover-content中元素的值。

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

在Bootstrap3 popover中为文本字段添加值

2 个答案: