jQuery SVG 矩形的单击事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4053991/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Click event for SVG rectangle
提问by Hallaghan
I'm using SVG together with jQuery in my Mvc Application. I draw a series of rectangles on my page and what I would like to do is attach a click or mouseover event for each rectangle, for say, popup an alert box. I've tried something like this, so far:
我在我的 Mvc 应用程序中使用 SVG 和 jQuery。我在我的页面上绘制了一系列矩形，我想做的是为每个矩形附加一个单击或鼠标悬停事件，例如，弹出一个警告框。到目前为止，我已经尝试过这样的事情：
$("rect[id='Y6']").attr('onclick', function() { alert("Hello!") });
and
和
$("rect[id='Y6']").live('click', function() {
alert("Hello!");
};
But sadly none of this events really worked for this control. Does anyone know how to do this?
但遗憾的是，这些事件都没有真正适用于这种控制。有谁知道如何做到这一点？
EDIT:
编辑：
I'm adding the javascript code I'm using below:
我正在添加我在下面使用的 javascript 代码：
<script type="text/javascript">
/*function resetSize(svg, width, height) {
svg.configure({ width: width || $(svg._container).width(),
height: height || $(svg._container).height()
});
}*/
function onLoad(svg, error) {
//svg.text(10, 20, error || 'Loaded into ' + this.id);
//resetSize(svg, null, null); //'100%', '100%');
}
$(function() {
$('#layout').svg({});
var svg = $('#layout').svg('get');
svg.load('<%= Url.Action("Layout", new{ id = Model.Id }) %>', { //<%= Url.Content("~/media/svg/lion.xml") %>', {
addTo: false,
changeSize: false,
onLoad: onLoad
});
});
$('rect#Y6').click( function(){
alert('hello');
});
</script>
The rectangles are loaded from a svg picture.
矩形是从 svg 图片加载的。
采纳答案by robertc
Your code to add the clickhandler needs to be part of the onLoadfunction - with that change it works for me.
您添加click处理程序的代码需要成为onLoad函数的一部分- 有了这个更改，它对我有用。
回答by Ken Redler
Try this:
尝试这个：
$('rect#Y6').click( function(){
alert('hello');
});
