Evénement Click pour le rectangle SVG

Question

J'utilise SVG avec jQuery dans mon application Mvc. Je dessine une série de rectangles sur ma page et ce que je voudrais faire est d'attacher un clic ou un événement mouseover pour chaque rectangle, par exemple, popup une boîte d'alerte. J'ai essayé quelque chose comme ça, jusqu'à présent:

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

et

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

Mais malheureusement aucun de ces événements vraiment travaillé pour ce contrôle. Est-ce que quelqu'un sait comment faire cela?

EDIT:

J'ajoute le code javascript J'utilise ci-dessous:

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

Les rectangles sont chargés à partir d'une image svg.

Answer 1

Votre code pour ajouter le gestionnaire click doit faire partie de la fonction onLoad - avec ce changement it works for me.

Answer 2

Essayez ceci:

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