Haga clic en evento para el rectángulo SVG

Question

Estoy usando SVG junto con jQuery en mi aplicación Mvc. Dibujé una serie de rectángulos en mi página y lo que me gustaría hacer es adjuntar un evento de clic o mouseover para cada rectángulo, por ejemplo, abrir un cuadro de alerta. He intentado algo como esto, hasta el momento:

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

y

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

Pero, lamentablemente ninguno de estos eventos realmente trabajado para este control. ¿Alguien sabe cómo hacer esto?

EDIT:

estoy añadiendo el código JavaScript que estoy usando a continuación:

<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> 

Los rectángulos están cargados de una imagen SVG.

Answer 1

El código para agregar el controlador click tiene que ser parte de la función onLoad - con ese cambio it works for me.

Answer 2

Prueba esto:

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