Jquery bootstrapx clickover奇怪的问题

我已经安装了一个JSFIDLE

按照以下步骤了解我的问题

点击“添加水果”上的+图标，现在还不做任何事情

单击“添加汽车”上的+图标

现在在输入框中添加一些文本并单击OK。 确定按钮停止工作，但原因是什么？？。

这真让我讨厌。 但是，如果点击“添加水果”上的+图标，并将输入框留空，则该操作有效。只需按关闭按钮即可

所以，如果我每次都按“关闭”按钮，如果我跳过“关闭”按钮并单击“下一步+”按钮，则“确定”将停止工作，直到我重新打开“单击覆盖”并按“关闭”按钮。 有什么想法吗

HTML

  <div class="control-group">
    <label class="control-label">Add Fruits</label>
    <div class="controls">
        <div class="input-append">
        <select id="fruits">
           <option>apple</option>
           <option>ornage</option>
        </select>
        <button data-attach="fruits " data-key="1 " rel="PERA"  class="btn " type="button"><i class="icon-plus "></i></button>                           
       </div>
    </div>
</div>

<div class="control-group">
    <label class="control-label">Add cars</label>
    <div class="controls">
        <div class="input-append">
        <select id="cars">
           <option>suzuki</option>
           <option>toyota</option>
        </select>
        <button data-attach="cars " data-key="2 " rel="PERA"  class="btn " type="button"><i class="icon-plus "></i></button>                             
       </div>
    </div>
</div>

添加水果
苹果
华丽
添加汽车
铃木
丰田

JQUERY

 jQuery(document).ready(function ()
{
  $('[rel*=PERA]').clickover(
  {
    html: true,
    placement: 'right',
    trigger: 'click',
    width: 350,
    title: '<strong>Add new</strong>',
    content: '',
    allow_multiple: false,
    global_close: false,
    onShown: function ()
    {
      var myid = generateUUID();
      var content = '<div id="' + myid + '"><div class="row" style="margin: 10px; "><input class="small m-wrap new_value" type="text" placeholder="Enter Value "/><button class="btn blue update_sel" type="submit"><i class="icon-ok icon-white"></i></button><button class="btn editable-cancel" type="button" data-dismiss="clickover"><i class="icon-remove"></i></button></div><div class="rspmsg" style="clear: both"> </div></div>';
      $("div.clickover").find("div.popover-content").html(content);

      var me = $('#' + myid);
      var clickover = this;
      var base = $('#' + clickover.options.attach);
      var updatebutton = me.find("button.update_sel");
      var newvalue = me.find("input.new_value");
      var closeclickover = me.find("button.editable-cancel");
      updatebutton.click(function (event)
      {
        event.preventDefault();
        setTimeout(function ()
        {
          // heavy lifting
          base.append($("<option></option>").attr("value", 13).attr("selected", "selected").text(newvalue.val()));
          closeclickover.click();
        }, 100);
      });

    },
  });
});

jQuery（文档）.ready（函数（）
{
$（'[rel*=PERA]'）。单击(
{
是的，
位置：'对'，
触发器：“单击”，
宽度：350，
标题：“添加新内容”，
内容：“”，
允许多个：false，
全局关闭：错误，
onShown:function（）
{
var myid=generateuid（）；
var内容=“”；
$（“div.clickover”）.find（“div.popover-content”）.html（content）；
变量me=$（“#”+myid）；
var clickover=this；
var base=$（“#”+clickover.options.attach）；
var updatebutton=me.find（“button.update_sel”）；
var newvalue=me.find（“input.new_值”）；
var closeclickover=me.find（“按钮.可编辑取消”）；
更新按钮。单击（函数（事件）
{
event.preventDefault（）；
setTimeout（函数（）
{
//重载
base.append（$（“”）.attr（“value”，13）.attr（“selected”，“selected”）.text（newvalue.val（））；
closeclickover.click（）；
}, 100);
});
},
});
});

更新：

如果我添加clickover选项

onHidden:function（）{alert（“hidden”）；}，

---

然后它开始工作。但如果我从onhidden中取出警报，它将再次停止工作。

按照您所说的顺序，第二个工具提示它与输入不一致，但如果您单击第二个加号按钮开始，它将显示为一致（对齐）。也许这与您的问题有关。算了吧，这似乎是一个javascript/jquery问题，但对齐差异确实存在。