Question

我有下面的代码添加酥料饼的成功动态元素：

var selection = "http://www.google.com/images/srpr/logo3w.png"; 
var image = '<img src="' + selection + '" />'; 
var previewLink = '<a class="show-popover" href="#" rel="popover" >(Hover to Preview) </a>'; 

$('#headerBlock').append(previewLink); 

$('body').popover({ 
    selector: '.show-popover', 
    title: 'test', 
    content: image, 
    trigger: 'hover' 
}); 

然而，当盘旋我不能保持酥料饼的活着。下面是我的代码，但它不工作：

$(".show-popover").popover({ 
    trigger: "manual", 
    html: true, 
    animation: false 
    }) 
    .on("mouseenter", function() { 
    var _this = this; 
    $(this).popover("show"); 
    $(".popover").on("mouseleave", function() { 
     $(_this).popover('hide'); 
    }); 
}).on("mouseleave", function() { 
    var _this = this; 
    setTimeout(function() { 
     if (!$(".popover:hover").length) { 
      $(_this).popover("hide"); 
     } 
    }, 300); 
}); 

这里是的jsfiddle：http://jsfiddle.net/KAvAZ/124/

任何帮助吗？

Answer 1

试试这个

var selection = "http://www.google.com/images/srpr/logo3w.png"; 
var image = '<img src="' + selection + '" />'; 
var previewLink = '<a class="show-popover" href="#" rel="popover" >(Hover to Preview) </a>'; 
$('#headerBlock').append(previewLink); 
$('body').popover({ 
    selector: '.show-popover', 
    title: 'test', 
    content: image, 
    trigger: 'hover' 
}).on("mouseenter", ".show-popover", function() { 
    var _this = this; 
    console.log("show") 
    $(this).popover("show"); 
    $(".popover").on("mouseleave", function() { 
     console.log("hide") 
     $(_this).popover('hide'); 
    }); 
    }).on("mouseleave", ".show-popover", function() { 
    var _this = this; 
    setTimeout(function() { 
     if (!$(".popover:hover").length) { 
     console.log("time out") 
     $(_this).popover("hide"); 
     } 
    }, 300); 
    }); 

的酥料饼是建立在身，所以$(".show-popover")不能触发.popover("hide/show")

您需要将鼠标事件绑定到体内，使其触发正确的DOM对象

Answer 2

这是我对这个问题的回答（我希望它有一天会帮助别人）：http://jsfiddle.net/KAvAZ/127/

我需要做的是在应该显示弹出窗口的链接的mouseenter事件中调用popover方法。由于我需要覆盖动态元素（即在DOM加载后添加），因此我使用了on方法：

var selection = "http://www.google.com/images/srpr/logo3w.png"; 
    var image = '<img src="' + selection + '" />'; 
    var previewLink = '<a class="show-popover" href="#" rel="popover" >(Hover to Preview) </a>'; 
    $('#headerBlock').append(previewLink); 


    $('body').on("mouseenter", '.show-popover', function() { 
     var _this = this; 

     $(this).popover({ 
     html: true, 
     content: function() { 
      return "Content"; 
     }, 
     title: function() { 
      return "Title"; 
     } 
     }); 

     $(this).popover("show"); 
     $(".popover").on("mouseleave", function() { 
     $(_this).popover('hide'); 
     }); 
    }).on("mouseleave", function() { 
     var _this = this; 
     setTimeout(function() { 
     if (!$(".popover:hover").length) { 
      $(_this).popover("hide"); 
     } 
     }, 300); 
    });