jquery - Click events not working for marker attached to the line end -

i have below code. consists of line marker attached end. wrote on click event line , marker. when click marker element click event not working , css properties cursor types not setting up. how write click events marker element , apply css properties?

$("#line12").on("click",function() {    alert("hai clicked line")  })  $("#arrow").on("click",function() {    alert("hai clicked line")  })

#line12  {    cursor:pointer;  }  #arrow  {    cursor:pointer;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <svg width="600px" height="200px">    <defs>      <marker id="arrow" markerwidth="10" markerheight="10" refx="0" refy="3" orient="auto" markerunits="strokewidth">        <path d="m0,0 l0,6 l9,3 z" fill="#000" />      </marker>    </defs>      <line x1="50" y1="50" x2="250" y2="150" stroke="#000" id="line12" stroke-width="5" marker-end="url(#arrow)" />  </svg>

from specification, last line of section 11.6.2 ‘marker’ element .

event attributes , event listeners attached contents of ‘marker’ element not processed; rendering aspects of ‘marker’ elements processed.

it explains everything.