SVG矩形的Click事件 [英] Click event for SVG rectangle
问题描述
我在Mvc应用程序中将SVG和jQuery一起使用.我在页面上绘制了一系列矩形,我要做的是为每个矩形附加单击或鼠标悬停事件,例如,弹出一个警报框. 到目前为止,我已经尝试过类似的方法:
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:
$("rect[id='Y6']").attr('onclick', function() { alert("Hello!") });
和
$("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?
我在下面添加了我正在使用的javascript代码:
I'm adding the javascript code I'm using below:
<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>
矩形是从svg图片加载的.
The rectangles are loaded from a svg picture.
推荐答案
添加click
处理程序的代码必须是onLoad
函数的一部分-进行更改
Your code to add the click
handler needs to be part of the onLoad
function - with that change it works for me.
这篇关于SVG矩形的Click事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!