2017-01-01 78 views
1

当我试着去创建一个Chrome扩展,我有以下的HTML和JS代码片段:onclick事件不工作的SVG元素

html contents: 
<div class="vid-refresh"> 
    <svg x="0px" y="0px" class="push-right" viewBox="0 0 491.236 491.236" xml:space="preserve" width="20px" height="20px"> 
    <path d="M55.89,262.818c-3-26-0.5-51.1,6.3-74.3c22.6-77.1,93.5-133.8,177.6-134.8v-50.4c0-2.8,3.5-4.3,5.8-2.6l103.7,76.2 c1.7,1.3,1.7,3.9,0,5.1l-103.6,76.2c-2.4,1.7-5.8,0.2-5.8-2.6v-50.3c-55.3,0.9-102.5,35-122.8,83.2c-7.7,18.2-11.6,38.3-10.5,59.4 c1.5,29,12.4,55.7,29.6,77.3c9.2,11.5,7,28.3-4.9,37c-11.3,8.3-27.1,6-35.8-5C74.19,330.618,59.99,298.218,55.89,262.818z  M355.29,166.018c17.3,21.5,28.2,48.3,29.6,77.3c1.1,21.2-2.9,41.3-10.5,59.4c-20.3,48.2-67.5,82.4-122.8,83.2v-50.3 c0-2.8-3.5-4.3-5.8-2.6l-103.7,76.2c-1.7,1.3-1.7,3.9,0,5.1l103.6,76.2c2.4,1.7,5.8,0.2,5.8-2.6v-50.4 c84.1-0.9,155.1-57.6,177.6-134.8c6.8-23.2,9.2-48.3,6.3-74.3c-4-35.4-18.2-67.8-39.5-94.4c-8.8-11-24.5-13.3-35.8-5 C348.29,137.718,346.09,154.518,355.29,166.018z" fill="#91DC5A"/></svg></div> 

js contents : 
$(".vid-refresh").eq(0).off('click').click(refreshVideo(this)); 

开始我尝试连接一个事件SVG EL本身。它不起作用。所以现在我试图在一个div内附上它,并尝试附加一个没有被触发的点击事件。但是,当页面首先被加载的时候,refreshVideo方法被调用'this'作为文档。可能是它的原因。

回答

0

查看片段,该片段应该按预期工作。您的版本名为refreshVideoclick()中的function(){ ... }声明仅在执行点击时执行。

function refreshVideo(el) { 
 
    console.log(el); 
 
} 
 

 
$(".vid-refresh").eq(0).off('click').click(function() { 
 
    refreshVideo(this); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="vid-refresh"> 
 
    <svg x="0px" y="0px" class="push-right" viewBox="0 0 491.236 491.236" xml:space="preserve" width="20px" height="20px"> 
 
    <path d="M55.89,262.818c-3-26-0.5-51.1,6.3-74.3c22.6-77.1,93.5-133.8,177.6-134.8v-50.4c0-2.8,3.5-4.3,5.8-2.6l103.7,76.2 c1.7,1.3,1.7,3.9,0,5.1l-103.6,76.2c-2.4,1.7-5.8,0.2-5.8-2.6v-50.3c-55.3,0.9-102.5,35-122.8,83.2c-7.7,18.2-11.6,38.3-10.5,59.4 c1.5,29,12.4,55.7,29.6,77.3c9.2,11.5,7,28.3-4.9,37c-11.3,8.3-27.1,6-35.8-5C74.19,330.618,59.99,298.218,55.89,262.818z  M355.29,166.018c17.3,21.5,28.2,48.3,29.6,77.3c1.1,21.2-2.9,41.3-10.5,59.4c-20.3,48.2-67.5,82.4-122.8,83.2v-50.3 c0-2.8-3.5-4.3-5.8-2.6l-103.7,76.2c-1.7,1.3-1.7,3.9,0,5.1l103.6,76.2c2.4,1.7,5.8,0.2,5.8-2.6v-50.4 c84.1-0.9,155.1-57.6,177.6-134.8c6.8-23.2,9.2-48.3,6.3-74.3c-4-35.4-18.2-67.8-39.5-94.4c-8.8-11-24.5-13.3-35.8-5 C348.29,137.718,346.09,154.518,355.29,166.018z" fill="#91DC5A"/></svg></div>

+0

OMG,由于它的工作 –

+0

如果这样可以解决问题,接受的答案将其关闭。 – ppasler

+0

完成..我很少使用这个。所以我不知道该复选标记是为了接受。刚刚搜索并找到并做到了 –