Question

短

问题基本上是为什么 this fiddle 无法正常运作。弹出窗口上的关闭按钮只能工作一次。

长

我正在创建一组SVG元素，这些元素被动态添加（通过angular指令）到页面，并希望它们具有关闭按钮的弹出窗口。我目前的做法不仅没有奏效，而且看起来太乱了。我正在寻找更好的解决方案。

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

有没有人有更好的方法呢？

Answer 1

我怀疑是因为popover正在改变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' );
};

Answer 2

我实际上通过将title作为一个带闭包的函数来修复它。

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

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

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

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

短

长

2 个答案: