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

我遇到了一个奇怪的引导popover问题。在我的页面中，我有两个带按钮的文本框，可以打开弹出窗口。 Popover有一个输入框，当数据输入到弹出窗口中的文本框中时，需要将值发回到打开popover的父文本框。bootstrap popover：用一个弹出框将值放入多个文本框

一切工作正常，直到这里，但是当我点击提交我在popover中输入的值，相同的值被添加到页面中的两个文本框。以下是代码：

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

有关如何解决此问题的任何建议？

感谢，纳文

来源

2014-01-27 user2269971

当你这样做：

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

您要为每个类showPopover元素的酥料饼。这可能是好的，但因为你正在重播内容，特别是输入元素，你会得到它们重复。因此，如果您运行代码并查看生成的源代码，则会看到您有2 x input和id="input1"。因此，您会发现交叉污染目的地的问题。

修复的方法是为每个弹出窗口分别设置不同的内容，或者让按钮的onclick事件获取最近输入的值以查找要填充的数据。

e.g：

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

下面是一个codepen表明：http://codepen.io/simoncowie/pen/lyGoK

来源

2014-01-28 01:49:56

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

回答

相关问题