Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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?
EDIT:
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>
The rectangles are loaded from a svg picture.
                For others, I was struggling with a mobile click event and it works with $(document).on('click touch', '.button', function () { ... });
– Dylan Valade
                Dec 11, 2016 at 16:14
                It didn't work either, Ken. I appreciate the help though. The control was rendered like this:  <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
                Oct 29, 2010 at 16:46
                Now, that's quite strange. Using firebug, I notice that when I'm loading the page, it enters the click event correctly. But upon clicking the rectangle, nothing really happens and the event is never fired. Do you have any clue? EDIT: If you want to see my jquery code or know any details about my files, I will add them in my comment.
– Hallaghan
                Oct 29, 2010 at 16:52
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.