Onclick-Ereignis funktioniert nicht für svg Element

Question

Wenn Im eine Chrome-Erweiterung zu schaffen versucht, ich habe folgende html und js-Schnipsel:

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

Zuerst habe ich versucht, ein Ereignis in dem SVG-el selbst anbringen. Es hat nicht funktioniert. So, jetzt habe ich versucht, das innerhalb eines div einzuschließen und habe versucht, ein Click-Ereignis anzuhängen, das nicht ausgelöst wird. Aber beide Male, wenn die Seite geladen wird, wird die Methode refreshVideo mit 'this' als Dokument aufgerufen. Was könnte die Ursache dafür sein?

Answer 1

Siehe das Snippet, das wie erwartet funktionieren sollte. Ihre Version heißt refreshVideo on-load. Mit der Anweisung in click() wird nur On-Click ausgeführt.

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>