0

我已经设置了一个 jsfiddle http://jsfiddle.net/bababalcksheep/Wbnj2/15/

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

  1. 单击“添加水果”上的 + 图标,不要做任何事情
  2. 单击“添加汽车”上的 + 图标

现在在输入框中添加一些文本,然后单击确定。 确定按钮停止工作,但为什么????。

这真的让我很烦。但是,如果单击“添加水果”上的 + 图标并将输入框留空,则它可以工作。除了按关闭按钮之外什么都不做。

因此,如果我每次都按住关闭按钮,如果我跳过关闭按钮并单击下一步 + 按钮,则 Ok 停止工作,直到我重新打开 clickover 并按下关闭按钮。有任何想法吗 ?

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

    },
  });
});

更新:

如果我添加 clickover 选项 onHidden: function () {alert("hiding");}, 然后它开始工作。但如果我从 onhidden 中取出警报,它会再次停止工作。

4

0 回答 0