在Bootstrap3 popover中为文本字段添加值(Adding value to text field in Bootstrap3 popover)

在Bootstrap3 popover中为文本字段添加值(Adding value to text field in Bootstrap3 popover)

问题

我有一个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 });

有没有办法做到这一点？

看看它的行动

这是一个可以看到它在行动的bootply

UPDATE

认为这可能是因为元素不在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);

THE PROBLEM

I have a popover which I fill with content from a hidden element. When the popover is shown I want to prefill the text fields with data which is contained elsewhere.

The popover shows correctly just no data in the text fields.

I'M TRYING

<!-- 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>

I know the data is there as I see it in console log:

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

Is there a way to do this?

SEE IT IN ACTION

Here's a bootply to see it in action

UPDATE

Thinking it could be because the elements are not in the DOM I also tried the following but that failed too:

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

UPDATE 2

I checked if the element I'm trying to add the value to actually exists, and it does:

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

最满意答案

奇怪。 无法解释，但如果你想让它工作，你可以使用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#

Strange. Can't explain but if you want it to work you can use attr

This works fine:

$('#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() does not work as expected as id's are duplicated. I've added $('#dob1_iq').show(); and that explains what's happening: http://www.bootply.com/B6ULMiPGbc#