为什么图表不能与 Bootstrap 模态一起使用？

Question

这是我用来在弹出式模态中制作饼图的模态。

HTML 代码：

<div class="modal fade" id="viewPollingModal" tabindex="-1" role="dialog" aria-labelledby="viewPollingModal" aria-hidden="true" >
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
        <h4 class="modal-title" id="myModalLabel">Survey</h4>
      </div>
      <div class="modal-body">
        <h3 id="appendQuestion"></h3>
        <canvas id="pieChart" style="height:250px"></canvas>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

JAVASCRIPT 代码：

$("#rpt-table").on('click', ".viewSurvey", function() {
  event.preventDefault();
  var id = parseInt($(this).attr('attr'));
  url = '{{ route("surveyResult", ":id") }}';
  url = url.replace(':id', id);
  $.get(url, function(data, status){
    $('#appendQuestion').html(data.poll_questions.Question);
    $('#viewPollingModal').modal('toggle');
    $("#modal").on('shown.bs.modal', function() {
      var pieChartCanvas = $("#pieChart").get(0).getContext("2d");
      var pieChart = new Chart(pieChartCanvas);
      var PieData = [
            {
              value: 700,
              color: "#f56954",
              highlight: "#f56954",
              label: "Chrome"
            },
            {
              value: 500,
              color: "#00a65a",
              highlight: "#00a65a",
              label: "IE"
            }
      ];
      var pieOptions = {
            segmentShowStroke: true,
            segmentStrokeColor: "#fff",
            segmentStrokeWidth: 2,
            percentageInnerCutout: 50,
            animationSteps: 100,
            animationEasing: "easeOutBounce",
            animateRotate: true,
            animateScale: false,
            responsive: true,
            maintainAspectRatio: true,
            legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
      };
      pieChart.Doughnut(PieData, pieOptions);
    });
  });
});

即使我使用的是“shown.bs.modal”，饼图也不能与 Bootstrap 模态（弹出）一起使用。 没有模态，它工作正常。

提前致谢

Answer 1

在$("#modal").on('shown.bs.modal', function() { ... }); 行，HTML 中没有与id="modal" 匹配的元素尝试将$("#modal").on('shown.bs.modal', ... 更改为$("#viewPollingModal").on('shown.bs.modal'...