Jquery類選擇器點擊重複函數

Question

我有一個類選擇器，點擊綁定。當我單擊多次時，會出現問題，它會在第一次回調函數兩次，在下次單擊時回調函數三次等等。

var point = data.points[0].x; 
    var counter = 0;   
    $(".menuOption").click(function() { 
     console.log(counter); 
     counter++;  
     var code = $(this).attr('id'); 
     var text = $(this).html(); 
     var newLine = { 
      type: 'line', 
      x0: point, 
      x1: point, 
      y0: 0, 
      y1: 1, 
      yref: 'paper', 
      line: { 
       color: 'black', 
       width: 1 
      }, 
      name: text 
     }; 
     var annotation = { 
      x: point, 
      y: data.points[0].y, 
      xref: 'x', 
      yref: 'y', 
      text: code, 
      textangle: 90, 
      showarrow: true, 
      arrowhead: 7 
     } 
     Plotly.relayout("grap", { 
      'shapes[0]': newLine, 
      'hovermode': 'closest', 
      'annotations[0]': annotation 
     }); 

    });  

我在下面的筆中添加了一些console.log。

CodePen

Answer 1

線76，你建立一個點擊監聽器：

myPlot.on('plotly_click', function (data) { ... } 

內部的處理程序（線106），你在菜單選項設定另一個點擊監聽器：

$(".menuOption").click(function() { ... } 

因此，每次發生plotly_click事件時，都會添加另一個點擊偵聽器。您應該將事件處理程序之外的menuOption click偵聽器綁定，或者在設置新偵聽器之前解除綁定。