用户点击时使用ajax加载processing.js sketch

我正在尝试通过单击 ajax 加载processing.js 草图，但它不起作用。如果我立即加载草图，它会起作用，但不会在用户交互时加载。这是我的代码：

$('#clicker').click(function(){
    var canvasRef = $('<canvas/>');
    canvasRef.attr('data-src','/uploads/processing_js/anything_1.pde');
    $('#loader').append(canvasRef);
});

我还尝试了该属性的“data-processing-sources”和“datasrc”。

有人知道为什么这不起作用吗？

我们只检查 DOMContentLoaded 上的 data-processing-sources 属性。如果您想在此之后加载处理草图，您可以使用Processing.loadSketchFromSources，这是Processing.js内部用于加载草图的方法：

$('#clicker').click(function(){
  var canvasRef = document.createElement('canvas');
  var p = Processing.loadSketchFromSources(canvasRef, ['/uploads/processing_js/anything_1.pde']);
  $('#loader').append(canvasRef);
});