弹出关闭按钮不起作用（在 SVG 元素上）答案

【问题标题】：Popover close button doesn't work (on SVG element)弹出关闭按钮不起作用（在 SVG 元素上）
【发布时间】：2013-11-10 15:00:48
【问题描述】：

短

问题基本上是为什么 this fiddle 不能正常工作。弹出框上的关闭按钮只能使用一次。

长

我正在创建一组动态添加（通过angular 指令）到页面的 SVG 元素，并希望它们具有带有关闭按钮的弹出框。我目前的方法不仅不起作用，而且似乎太乱了。我正在寻找更好的解决方案。

HTML

<div id="test-popover">Click on the rectangle for the popover.
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:100%; height:200px;">
    </svg>
</div>

Javascript

var $element = $(document.createElementNS("http://www.w3.org/2000/svg", 'rect'))
    .attr({ x: 42, y: 50, width: 50, height:75, fill: "#0011ff", })

var $closebtn = $('<button type="button" class="close" aria-hidden="true">&times</button>')
.on('click', (function ($element) {
    return function () {
        console.log("close...");
        $element.popover('hide');
    }
})($element));
var $poptitle = $('<div>Title</div>').append($closebtn);
var popcontent = function () {
    return "some content with <b>HTML</b>";
};


$element.popover({
    html: true,
    title: $poptitle,
    content: popcontent,
    container: 'body',
});


$('#test-popover svg').append($element);

小提琴：http://jsfiddle.net/k9vva

有人有更好的方法吗？

【问题讨论】：

标签： angularjs twitter-bootstrap svg twitter-bootstrap-3 popover

【解决方案1】：

我怀疑是因为弹出框正在更改 html 并且事件处理程序被删除或其他原因。一种方法是在附加的 html 中包含 hidepopup 调用。这里有一个小提琴http://jsfiddle.net/k9vva/1/（可能有更好的解决方案不使用主范围，但这可能取决于您如何集成它）。

var $element = $(document.createElementNS("http://www.w3.org/2000/svg", 'rect')).attr(
    { x: 42, y: 50, width: 50, height:75, fill: "#0011ff", });

var $closebtn = $('<button type="button" class="close" aria-hidden="true" onclick="hidepop();">&times</button>');

var $poptitle = $('<div>Title</div>').append($closebtn);
var popcontent = function () {
    return "some content with <b>HTML</b>";
};

$('#test-popover svg').append($element);

$element.popover({
    html: true,
    title: $poptitle,
    content: popcontent,
    container: 'body',
});

window.hidepop = function() {
    $element.popover( 'hide' );
};

【讨论】：

感谢 ans，但是，我认为我带来的更好，因为它有点使用给定的命名空间，这可能更好地使用 angular。

【解决方案2】：

我实际上是通过将 title 作为带有闭包的函数调用来修复它的。

var $poptitle = (function($closebtn){
    return function(){
        return $('<div>Title</div>').append($closebtn);
    }
})($closebtn);

我想我会在这里添加它以防有人想知道。虽然这个解决方案看起来有点奇怪，但是哦，好吧......

（我实际上在一个闭包下添加了 $closebtn 和 $popover 的创建，以防万一这给任何人带来问题）。

【讨论】：