Nhấp vào sự kiện cho hình chữ nhật SVG

Question

Tôi đang sử dụng SVG cùng với jQuery trong Ứng dụng Mvc của mình. Tôi vẽ một loạt các hình chữ nhật trên trang của tôi và những gì tôi muốn làm là đính kèm một nhấp chuột hoặc sự kiện di chuột qua cho mỗi hình chữ nhật, ví dụ, bật lên một hộp cảnh báo. Tôi đã thử một cái gì đó như thế này, cho đến nay:

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

và

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

Nhưng thật đáng buồn không ai trong số các sự kiện này thực sự làm việc để kiểm soát này. Có ai biết cách làm điều này không?

EDIT:

tôi thêm mã javascript Tôi đang sử dụng dưới đây:

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

Các hình chữ nhật được nạp từ một bức tranh svg.

Answer 1

Mã của bạn để thêm handler click cần phải là một phần của onLoad chức năng - với sự thay đổi đó it works for me.

Answer 2

Hãy thử điều này:

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