Jquery bootstrap popover:使用一个popover将值放入多个文本框中
我遇到了一个奇怪的bootstrap popover问题。在我的页面中,我有两个文本框,带有打开弹出窗口的按钮。Popover有一个输入框,当数据输入到Popover内的文本框中时,需要将值发送回打开Popover的父文本框 在这里之前一切正常,但是当我点击提交我在弹出窗口中输入的值时,相同的值被添加到页面中的两个文本框中。代码如下:Jquery bootstrap popover:使用一个popover将值放入多个文本框中,jquery,twitter-bootstrap,popover,Jquery,Twitter Bootstrap,Popover,我遇到了一个奇怪的bootstrap popover问题。在我的页面中,我有两个文本框,带有打开弹出窗口的按钮。Popover有一个输入框,当数据输入到Popover内的文本框中时,需要将值发送回打开Popover的父文本框 在这里之前一切正常,但是当我点击提交我在弹出窗口中输入的值时,相同的值被添加到页面中的两个文本框中。代码如下: <script type="text/javascript" language="javascript"> $(document).ready
<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>
对如何解决这个问题有什么建议吗
谢谢,
Navin执行此操作时:
$('.showPopover').popover({...
您正在使用showPopover类为每个元素创建一个popover。这可能很好,但因为您正在恢复内容,尤其是输入元素,所以您将获得重复的内容。因此,如果您运行代码并查看生成的源代码,您将看到有2个id=input1的输入。因此,您会遇到交叉污染目的地的值问题
解决方法是为每个popover提供单独的内容,或者让按钮的onclick事件获取最近输入的值,以查找要填充的数据
e、 g:
下面是一个代码笔,它演示了:
var ctlInput = $(this).siblings("#input1").val();