0

短的

问题基本上是为什么这个小提琴不能正常工作。弹出框上的关闭按钮只工作一次。

长

我正在创建一组动态添加（通过角度指令）到页面的 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

有没有人有更好的方法来做到这一点？

4

2 回答 2

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' );
};
于 2013-10-31T10:06:33.417 回答
0

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

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

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

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

于 2013-10-31T20:05:02.390 回答