如何解决重复对话框另存为pdf？

Question

我使用选择框绘制图表并以pdf格式打印图表。

这是选择框和布局代码：

<div class= "chart-column"> 
         <div class="chart-3-5block-inner"> 
          <div class="chart-block-title">Job & Internship by Category</div> 
          <div class="chart-view" style="padding-top: 10px; padding-left: 10px"> 

           <!-- //combo box options to select application filter --> 
           <?php 
            echo 'Category Group: '; 
            echo '<select id="category_filter">'; 
            echo '<option value="0" selected="selected">Select</option>'; 
            echo '<option value="1">Accounting/Finance</option>'; 
            echo '<option value="2">Admin/Human Resources</option>'; 
            echo '<option value="3">Arts/Media/Communications</option>'; 
            echo '<option value="4">Building/Construction</option>'; 
            echo '<option value="5">Computer/Information Technology</option>'; 
            echo '<option value="6">Education/Training</option>'; 
            echo '<option value="7">Engineering</option>'; 
            echo '</select>'; 

           ?> 

          </div>     
          <div class="chart-view" id="categoryname_chart_div"></div> 
          <div class="chart-block-description">The bar chart shows the category of job & Internship posted by linked companies</div> 
          <div class="chart-block-view"> 
           <input id="pdf-categoryname" type="button" value="Save as PDF" disabled /> 
          </div> 
         </div> 

这是用于绘制图表的代码。

function drawCategoryNameChart(){ 

       // for category-filter 
       $('#category_filter').on('change',function(){ 
       var select1 = $(this).val(); // category-filter value 
       var jsonCategoryNameData = $.ajax({ 
          url: "<?php echo $ajaxurl11; ?>", 
          contentType: "application/json", 
          data: {Value1 : select1}, 
          dataType: "json", 
          async: false 
          }).responseText; 

       var CategoryNameData = new google.visualization.DataTable(jsonCategoryNameData); 

       var optionsCategoryNameChart = { 
          //title: 'Job/Internship Distribution by Category', 
          titleTextStyle: { 
            color: 'Black', 
            fontSize: 18 
           }, 
           pieSliceText: 'none', 
          fontSize: '11', 
          hAxis: { 
            title: 'Category Name', 
           }, 
          vAxis: { 
            title: 'Total', 
            minValue: 0, 
            gridlines: { count: 4 }  
           }, 
          legend: {textStyle: {color: '#464847', fontSize: 11}}, 
          tooltip: {isHtml: true}, 
          backgroundColor: '#F8F9FA', 
          colors: [ '#3B84BB', '#FFAF45', '#FFE345', '#0CAA63', '#1D40A6', '#F7AE12', '#F75012','#6944C3'], 
          chartArea: { 
            backgroundColor: { 
             stroke: '#fff', 
             strokeWidth: 1 
            } 
           }, 
          height: 300, 
          chartArea: { left:"10%",top:"20%",width:"70%",height:"50%" } 
           };   


       // Instantiate and draw our pie chart, passing in some options. 
       var CategoryNameChart = new google.visualization.ColumnChart(document.getElementById('categoryname_chart_div')); 

       //draw the chart  
       CategoryNameChart.draw(CategoryNameData, optionsCategoryNameChart); 

       google.visualization.events.addListener(CategoryNameChart, 'ready', function() { 
        btnSave.disabled = false; 
       }); 

       var btnSave = document.getElementById('pdf-categoryname'); 

       btnSave.addEventListener('click', function() { 
        var doc = new jsPDF(); 
        doc.setFontSize(15); 
        doc.text(70, 25, "Job & Internship by Category"); 
        doc.addImage(CategoryNameChart.getImageURI(), 15, 30); 
        doc.setFontSize(9); 
        doc.text(50, 115, "The bar chart shows the category of job & Internship posted by linked companies"); 
        doc.save('category_name.pdf'); 
        }, false); 
       }); 

    } 

我的问题是，当点击按钮另存为PDF格式时，如果我点击两次选择框，pdf保存框会出现两次。弹出框的数量根据选择框中的选择数量显示。

为什么它会重复该操作？

Answer 1

问题被添加到该按钮的Click事件多次每个类别过滤器发生改变时，
它应该只被添加一次

纠正
，添加单击事件更改事件之外

还添加事件侦听器图表时，
他们应该图表绘制

前看到下面的代码片段添加...

function drawCategoryNameChart() { 
    var btnSave = document.getElementById('pdf-categoryname'); 
    var CategoryNameChart; 

    // for category-filter 
    $('#category_filter').on('change',function() { 
    var select1 = $(this).val(); // category-filter value 
    var jsonCategoryNameData = $.ajax({ 
     url: "<?php echo $ajaxurl11; ?>", 
     contentType: "application/json", 
     data: {Value1 : select1}, 
     dataType: "json", 
     async: false 
     }).responseText; 

    var CategoryNameData = new google.visualization.DataTable(jsonCategoryNameData); 

    var optionsCategoryNameChart = { 
     //title: 'Job/Internship Distribution by Category', 
     titleTextStyle: { 
       color: 'Black', 
       fontSize: 18 
      }, 
      pieSliceText: 'none', 
     fontSize: '11', 
     hAxis: { 
       title: 'Category Name', 
      }, 
     vAxis: { 
       title: 'Total', 
       minValue: 0, 
       gridlines: { count: 4 } 
      }, 
     legend: {textStyle: {color: '#464847', fontSize: 11}}, 
     tooltip: {isHtml: true}, 
     backgroundColor: '#F8F9FA', 
     colors: [ '#3B84BB', '#FFAF45', '#FFE345', '#0CAA63', '#1D40A6', '#F7AE12', '#F75012','#6944C3'], 
     chartArea: { 
       backgroundColor: { 
        stroke: '#fff', 
        strokeWidth: 1 
       } 
      }, 
     height: 300, 
     chartArea: { left:"10%",top:"20%",width:"70%",height:"50%" } 
     }; 


    // Instantiate and draw our pie chart, passing in some options. 
    CategoryNameChart = new google.visualization.ColumnChart(document.getElementById('categoryname_chart_div')); 

    google.visualization.events.addListener(CategoryNameChart, 'ready', function() { 
     btnSave.disabled = false; 
    }); 

    //draw the chart 
    CategoryNameChart.draw(CategoryNameData, optionsCategoryNameChart); 
    }); 

    btnSave.addEventListener('click', function() { 
     var doc = new jsPDF(); 
     doc.setFontSize(15); 
     doc.text(70, 25, "Job & Internship by Category"); 
     doc.addImage(CategoryNameChart.getImageURI(), 15, 30); 
     doc.setFontSize(9); 
     doc.text(50, 115, "The bar chart shows the category of job & Internship posted by linked companies"); 
     doc.save('category_name.pdf'); 
    }, false); 
}