我已经设置了一个 jsfiddle http://jsfiddle.net/bababalcksheep/Wbnj2/15/
请按照以下步骤了解我的问题。
- 单击“添加水果”上的 + 图标,不要做任何事情
- 单击“添加汽车”上的 + 图标
现在在输入框中添加一些文本,然后单击确定。 确定按钮停止工作,但为什么????。
这真的让我很烦。但是,如果单击“添加水果”上的 + 图标并将输入框留空,则它可以工作。除了按关闭按钮之外什么都不做。
因此,如果我每次都按住关闭按钮,如果我跳过关闭按钮并单击下一步 + 按钮,则 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 中取出警报,它会再次停止工作。