JQuery SVG对象：正确捕获点击事件

这是我的HTML：

<nav>
<ul>
    <li class="active left" id="profileLink">
        <object type="image/svg+xml" data="public/img/nav/profile.svg">    
                <img src="public/img/nav/profile.png" alt="Blue Square"/>     
        </object>
    </li>
    <li class="left" id="suggestionsLink">
        <object type="image/svg+xml" data="public/img/nav/suggestions.svg">    
                <img src="public/img/nav/suggestions.png" alt="Blue Square"/>     
        </object>
    </li>
    <li class="right" id="setTingsLink">
        <object type="image/svg+xml" data="public/img/nav/setTings.svg">    
                <img src="public/img/nav/setTings.png" alt="Blue Square"/>     
        </object>
    </li>
    <li class="right" id="statisticsLink">
        <object type="image/svg+xml" data="public/img/nav/statistics.svg">    
                <img src="public/img/nav/statistics.png" alt="Blue Square"/>     
        </object>
    </li>

    <li class="middle" id="friendsLink">
        <object type="image/svg+xml" data="public/img/nav/friends.svg">    
                <img src="public/img/nav/friends.png" alt="Blue Square"/>     
        </object>
    </li>
</ul>

这是我正在使用的脚本：

$("#wrapper").on("click",'#friendsLink',function(){
       console.log('test');
       loadFriends();
    });

当我使用脚本选择一个简单的a-tag时,它工作正常,但在这个svg对象上它根本不起作用.请注意,单击li元素的填充区域时,它确实有效.但在点击svg-image区域时却没有.

这个帖子中的帖子表明svg dom与html dom不同,因此jquerys事件失败了.

jQuery Selector + SVG Incompatible?

尝试处理svg元素上的点击事件时,该怎么办？

帮助非常感谢