SVG矩形的点击事件

Question

我正在我的Mvc应用程序中使用SVG和jQuery。我在我的页面上绘制了一系列矩形，我想做的是为每个矩形附加一个点击或鼠标悬停事件，比如弹出一个警告框。

到目前为止，我尝试过这样的代码：

$("rect[id='Y6']").attr('onclick', function() { alert("Hello!") });

和

$("rect[id='Y6']").live('click', function() {    
    alert("Hello!");
};

但是很遗憾，这些事件都不适用于此控件。有谁知道怎么做吗？

编辑：

下面我添加了我正在使用的 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>

< p >这些矩形是从SVG图片中加载的。< /p >

- Hallaghan

Answer 1

你需要将添加 click 处理程序的代码放在 onLoad 函数中——通过这个更改，它对我来说可以工作了。

- robertc

---

谢谢Robert，按照您的建议尝试编写后，它成功了！非常感谢！ - Hallaghan

对于其他人而言，我曾经在移动端的点击事件上遇到了困难，但是使用 $(document).on('click touch', '.button', function () { ... }); 解决了这个问题。 - Dylan Valade

歧视三角形。 - geotheory

如果您将脚本放在body的最后一个元素，则它应该起作用。 - Pavel B.

Answer 2

试试这个：

$('rect#Y6').click( function(){
  alert('hello');
});

- Ken Redler

---

肯，这也不起作用。虽然感谢你的帮助。控件呈现如下：<rect style="fill:black;fill-opacity:0.78488375;stroke:black;stroke-width:0.04082483;stroke-miterlimit:1;stroke-opacity:0.78488375;stroke-dasharray:none" id="Y6" width="20" height="20" x="120.44141" y="32.362183" class="wz-flat" label=""></rect> - Hallaghan

现在，这很奇怪。使用Firebug，我注意到当我加载页面时，它正确地进入了单击事件。但是在单击矩形后，什么也没发生，事件也从未触发。你有什么线索吗？编辑：如果你想看我的jquery代码或知道任何关于我的文件的细节，我会在评论中添加它们。 - Hallaghan

@Hallaghan，当然。没有代码很难说出问题出在哪里。 - Ken Redler