用户点击加载processing.js草图和ajax

Question

我正在尝试在点击时加载带有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'作为属性。

任何人都知道为什么这不起作用？

Answer 1

我们只检查DOMContentLoaded上的data-processing-sources属性。如果要在此之后加载Processing草图，可以使用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);
});