Applying plotly_click to multiple but specific graphs, using class name

plotly.js
1

I am new to plotly, but am so far very pleased and pleasantly surprised by its functionality!

I do have a question about plotly_click and how to link it to a graph via class.
There will be multiple graphs on one page, and each graph will need to have one of a few different functionalities.
Originally the page creates a graph using plotly and allows the user to select a point on this graph. Lets call it graph1.
(I dont think the details for the first graph are important, but if they are please let me know and I will explain)
Then using

graph1.on('plotly_click', function(data)){
  selected_point = data.points[0].x;
  make_new_graph(selected_point, ckass  = 'graph_type1')
}

a new graph is made in a new div with make_new_graph with the class given
make_new_graph creates a graph automatically in a new div as such

<div id="div1_box" class="drop_box graph_type1 js-plotly-plot"> 
graph_info...
</div>

graph_type1 is an example of a graph with one of the functionalities mentioned above.
The id on the graph ticks up each time so next time the user click it would make the same with id="div2_box"

I was hoping to use something like;

$(document).on('plotly_click', '.graph_type1', function(data){
    selected_ms2 = data.points[0].x;
    console.log(selected_ms2);
    etc.
});

This would then apply to every graph that has the class tag graph_type1
The console.log is purely to check if it is working.

I have tried quite a few things, and this seems to get me the closest as it registers the click, but can not get the data.
The error reads, Uncaught TypeError: Cannot read property ‘0’ of undefined.
I know what it means, but I have no idea how to resolve it

Thank you for your time!

`

2

$(document).on('plotly_click', /* */) won’t catch the plotly_click event.

You’ll need to attach your handlers onto your plot <div>s.

3

Thank you for the reply.
In previous code I have used

plot.on(‘plotly_click’, function(plot_data)){
/* get the clicked data ad run function*/
}

This worked, however I am adding these plots dynamically in a div, so not I am not sure how I would put the data in function(data).
I know it was as long shot but I tried giving all the plots a class of “new_graph” and giving them all ids that tick up each time on is given eg. id1, id2, id3 etc.
Then storing the ids and data in a class like plots = {“id1”:{'‘plot":plot1, “data” data1}, “id2”{’'plot":plot2, “data” data2},
and then using

$(document).on('click', '.new_graph', function(){
     var temp_id = $(this).attr('id');
     temp_plot = plots_data[temp_id]['plot']
     temp_data = plots_data[temp_id]['data'];
     temp_plot.on('plotly_click', function(temp_data){
        selected_x = temp_data.points[0].x;
        console.log(selected_x);
 });

});

but this didn’t work at all.
If you even have an idea of what I should read, it would be greatly appreciated!