我试图加载processing.js草图与阿贾克斯的点击和它不工作。它的工作原理，如果我瞬间加载草图，而不是在用户交互。这是我的code：

I'm trying to load a processing.js sketch with ajax on click and it's not working. It works if I load the sketch instantly, but not on a user interaction. Here's my code:

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

我也试过数据处理 - 资源和DATASRC的属性。

I've also tried 'data-processing-sources' and 'datasrc' for the attribute.

谁知道为什么这不起作用？

Anyone know why this doesn't work?

推荐答案

我们只检查数据处理，源对DOMContentLoaded属性。如果要加载后处理草图，你可以使用Processing.loadSketchFromSources，这是Processing.js内部使用加载草图：

We only check the data-processing-sources attribute on DOMContentLoaded. If you want to load a Processing sketch after that, you could use Processing.loadSketchFromSources, which is what Processing.js uses internally to load a sketch:

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