0

我已经修改了 bootstrap 的 popover 函数以包含一个效果很好的回调。但是在回调中，我不能以编程方式关注第一个表单字段。奇怪，因为我可以在回调函数中操作其他元素，也可以在其他点关注元素。

这是添加我从另一个 SO 问题（https://stackoverflow.com/a/14727204/1596547）获得的回调的代码：

var tmp = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function () {
  tmp.call(this);
  if (this.options.callback) {
    this.options.callback();
  }
}

这是弹出框代码：

$('#a-editor-btn').popover({
    html: true,     
    placement: 'bottom',
    callback: function(){
        $('#a-form-point').focus();  //nothing happens
        console.log('hello');  // works
    .
    .

    },
    content: $('#a-form').html()
}).parent().delegate('button#insert-point-btn', 'click', function() {
    insertPoint();
}).delegate('.a-form','keypress', function(e) {
    if ( e.which == 13 ) {
        insertPoint();
    }
});
4

1 回答 1

1

您的按钮单击似乎提​​交了表单。提交后你的焦点就丢失了。通过.click(function(){return false;});在您的.popover().

    $('#a-editor-btn').popover({
    html: true,     
    placement: 'bottom',
    callback: function(){
        //e.stopPropagation();
        thisfocus();  //nothing happens
        console.log('hello');  // works

    },
    content: $('#a-form').html()
}).parent().delegate('button#insert-point-btn', 'click', function() {
    insertPoint();
}).delegate('.a-form','keypress', function(e) {
    if ( e.which == 13 ) {
        insertPoint();
    }
}).click(function(){return false;});

现在你的弹出框不会再消失了。快速修复：调用 hide() 超时：

var tmp = $.fn.popover.Constructor.prototype.show;
var tmp2 = $.fn.popover.Constructor.prototype.hide;
$.fn.popover.Constructor.prototype.show = function () {
  tmp.call(this);
  if (this.options.callback) {
    this.options.callback();
  }
   var that = this;
   setTimeout(function(){tmp2.call(that)},500); 
}

见：http ://bootply.com/66195

于 2013-07-01T23:02:11.790 回答