bootstrap popover：用一个弹出框将值放入多个文本框中答案

【问题标题】：bootstrap popover: put values into multiple textboxes with one popoverbootstrap popover：用一个弹出框将值放入多个文本框中
【发布时间】：2014-01-27 21:41:09
【问题描述】：

我遇到了一个奇怪的引导弹出问题。在我的页面中，我有 2 个带有打开弹出框的按钮的文本框。弹出框有一个输入框，当在弹出框内的文本框中输入数据时，需要将值发送回打开弹出框的父文本框。

直到这里一切正常，但是当我单击提交我在弹出窗口中输入的值时，相同的值将添加到页面中的两个文本框中。下面是代码：

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        $('.showPopover').popover({
            html: true,
            placement: "bottom",
            title: function () {
                return $("#popover-head").html();
            },
            content: function () {
                return $("#popover-content").html();
            }
        });
        $('.showPopover').click(function () {
            var cTextBox = '#' + $(this).prev().attr("id");
            $('#hdnCalculatefteFor').val(cTextBox);
        });

        $(document).on("click", ".close", function () {
            $(".showPopover").popover('hide');
        });

        $(document).on("click", ".getData", function () {
            var ctl = $('#hdnCalculatefteFor').val();
            var ctlInput = $('#input1').val();
            $(ctl).val(ctlInput);
        });
    });
</script>
<div class="row">
    <div class="col-md-2">
        <div id="div1" class="form-group">
            <label class="required">Text Box 1</label>
            <div class="input-group">
                <asp:TextBox ID="txt1" runat="server" class="form-control" ClientIDMode="Static"></asp:TextBox>
                <span id="s1" style="cursor:pointer;" class="form-control showPopover" >
                        <i class="icon-list"></i>
                </span>
            </div>
        </div>
    </div>
    <div class="col-md-2">
        <div id="div2" class="form-group">
            <label class="required">Text Box 2</label>
            <div class="input-group">
                <asp:TextBox ID="txt2" runat="server" class="form-control" ClientIDMode="Static"></asp:TextBox>
                <span id="s2" style="cursor:pointer;" class="form-control showPopover">
                    <i class="icon-list"></i>
                </span>
            </div>
        </div>
    </div>
</div>
<asp:HiddenField ID="hdnCalculatefteFor" ClientIDMode="Static" runat="server" />
<div id="popover-head" class="hide" >
    Test
    <button type="button" class="close" data-dismiss="popover" aria-hidden="true">×</button>
</div>
<div id="popover-content" class="hide">
    <input type="text" id="input1" />                
    <button type="button" id="btn" class="getData" value="Get"></button>    
</div>

关于如何解决这个问题有什么建议吗？

谢谢，纳文

【问题讨论】：

标签： jquery twitter-bootstrap popover

【解决方案1】：

当你这样做时：

$('.showPopover').popover({...

您正在为类showPopover 的每个元素创建一个弹出框。这可能很好，但是因为您正在重新使用内容，尤其是输入元素，您将获得重复的内容。因此，如果您运行代码并查看生成的源代码，您将看到有 2 x input 和 id="input1"。因此，您会遇到交叉污染目的地的价值观的问题。

解决方法是为每个弹出框设置单独的内容，或者让按钮的onclick 事件获取最近输入的值以查找要填充的数据。

例如：

var ctlInput = $(this).siblings("#input1").val();

这是一个代码笔，证明：http://codepen.io/simoncowie/pen/lyGoK

【讨论】：