禁用先前按钮点击时的点击事件操作

Question

I have a series of three buttons each with its own id. The buttons each fire a bs modal (the same modal - #mymodal). The modal needs to display a google chart the key requirement being that the chart displayed in the modal must be dependent on the button clicked. So the code structure after the google chart API on the modal is:

    //show ONLY chart 1 if button 1 is clicked
    $(document).ready(function(){
        $("#btn0").click(function(){
        //add chart1 data and options
        //view chart1 in the modal

       });
   });

     //show ONLY chart 2 if button 2 is clicked
     $(document).ready(function(){
      $("#btn1").click(function(){
     //add chart2 data and options
     //view  chart2 in the modal
        });
    });


    //show ONLY chart 3 if button 3 is clicked
    $(document).ready(function(){
    $("#btn2").click(function(){
    //add chart3 data and options
    //view chart3 in the modal
     });
    });

All works fine first time around. IE click the first button (#btn0) and the modal fires with ONLY chart 1 included.

However when I click button 2 (#btn1) the modal fires again but contains chart 2 AND unwanted chart 1.

When I click button 3 (#btn2) the modal fires again but contains unwanted charts 1,2, as well as wanted chart 3.

Now any button I fire contains all three charts unless I refresh the page. Then the process repeats itself

I have tried inserting .unbind and .off methods:

$("#btn0").unbind("click");
$("#btn0").off("click");

after the view chart1 procedure for btn0. I also tried e.stopPropagation() in the same position. No luck. Same behaviour. But maybe I am not using these methods properly

I would appreciate any help. This would seem to be a case of just getting rid of the actions created by early button-clicks prior to clicking another button. However my 2 hours of efforts I'm afraid I have failed to achieve that. Thanks in advance

AS REQUESTED Here is the modal caller. Just includes the graph.php - page which loads in accordance with problem reported.

Get Report

        <!-- Modal content-->
                <div class="modal-content">
                        <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal">&times;</button>
                          <h4 class="modal-title">Job Log Report - Global</h4>
                        </div>              
                        <div class="modal-body">    
                            <div class="row" style="background-color

                                    <div class="col-sm-8 text-align:center">
                                        <p style="color:darkred">Job Log Graph<br></p>                                                                                  
                                        <?php include "graphs.php"?>
                                    </div>                                      
                        </div>

                        <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close Report</button>
                        </div>
                </div>    
        </div>
    </div>

And here is the graphs.php page included in the modal above.

    <!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

  <script type="text/javascript"> 

  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {          

        $(document).ready(function(){
            $("#btn0").click(function(){
                        // Create the data table col headings or pie segment headings
                        var data1 = new google.visualization.DataTable();
                        data1.addColumn('string', 'abc');
                        data1.addColumn('number', 'Number of Jobs');
                        data1.addRows
                        ([                            
                            DATA
                        ]);

                    // Set chart options
                        var options1 = {'title':'Global Jobs - By Status',
                                       'width':700,
                                       'height':300};

                    // Instantiate and draw our chart, passing in some options.
                        var chart1 = new google.visualization.BarChart(document.getElementById('chart1_div'));
                        chart1.draw(data1, options1);
                    });
                });

        $(document).ready(function(){
            //On button click, load new data
            $("#btn1").click(function(){
                        // Create the data table col headings or pie segment headings
                        var data2 = new google.visualization.DataTable();
                        data2.addColumn('string', '');
                        data2.addColumn('number', 'Number of Jobs by Category');                
                        data2.addRows
                        ([

                        DATA

                        ]);

                        // Set chart options
                        var options2 = {'title':'Approved Jobs - By Category-Last 12 Months',
                                       'width':700,
                                       'height':600};

                        // Instantiate and draw our chart, passing in some options.
                        var chart2 = new google.visualization.BarChart(document.getElementById('chart2_div'));
                        chart2.draw(data2, options2);
            });
        });

        $(document).ready(function(){
            //On button click, load new data
            $("#btn2").click(function(){    

                        // Create the data table col headings or pie segment headings
                                var data3 = new google.visualization.DataTable();
                                data3.addColumn('string', 'nothing doing');
                                data3.addColumn('number', 'Number of Jobs by Category');
                                data3.addRows
                        ([          
                        DATA         
                        ]);

                    // Set chart options
                        var options3 = {'title':'Approved Jobs - By Category-Last 12 Months',
                                       'width':700,
                                       'height':600};
                        // Instantiate and draw our chart, passing in some options.
                        var chart3 = new google.visualization.PieChart(document.getElementById('chart3_div'));
                        chart3.draw(data3, options3);   
            });
        });     

}

Charts inside three divs that follow the chart script

   <div id="chart1_div"></div>
   <div id="chart2_div"></div>
   <div id="chart3_div"></div>

Answer 1

I suspect it's an issue with replacing or clearing your data in the modal the second/third time around.

Are you targeting an area in the modal and putting the chart data in with $().html()? That's probably the easiest way to ensure previous content gets overwritten.

Proving a sample of your "add chart1 data and options" code might help here if what I said above doesn't solve the issue.