D3 add a click event to the element, why does it take effect only after 2 clicks?

.point-create is the dot
.tipArrow-create is the arrow
`showTipArrow= () = > {

d3.selectAll(".point-create").on("click",function(){//
  let $thisDom=d3.select(this);
  d3.selectAll(".tipArrow-create").filter(function(d,i,list){
    let arrowDom=d3.select(this);
    if(arrowDom.attr("regId")==$thisDom.attr("regId")){//regId
      arrowDom.attr("display","");
    
    }
  });
});
}`

showTipArrow
 d3.select("-sharppoints").append("use")
          .attr("id", "red_"+thisId)
          .attr("regId",thisId)
          .attr("type", "point")
          .attr("x", width-10)
          .attr("y", cyRed-10)
          .attr("yy",cyRed)
          .attr("class", "point-create")
          .attr("xlink:href","-sharppoint")
          .call(d3.drag()
              .on("start", dragstarted)
              .on("drag", dragged)
              .on("end", dragended));
       this.showTipArrow();       

the result is that the added click function will not take effect until it is clicked twice. Does anyone know what"s going on?

Feb.27,2021

is it normal after I remove the added drag event?

Menu