Question

我正在制作html / css / js编辑器。在编码时必须刷新并显示结果。

制作了三个文本区域-用于HTML，CSS和JS，并具有以下代码：

$('#HTML, #CSS, #JS').keyup(function(){ 
   $('#resultDIV').html(
      '<script src=\'jQuery\'><\/script>' +
      '<style>' + $('#CSS').val() + '<\/style>' +
                  $('#HTML').val() +
      '<script>' + $('#JS').val() + '<\/script>'
   ); 
});

Simple DEMO（编辑文本区域中的所有内容，然后单击“ FOO”）

HTML，CSS，JS-可以正常运行，但是jQuery出现问题-在任何文本区域中进行任何编辑后-它将再次运行。并且，如果进行了50次编辑，则“单击”事件将触发50次单击而不是1次单击。是否有任何方法可以从内存中“清除”所有以前的代码并仅运行当前代码？ empty();和html('');无济于事。

我还有另一种方法-每次将当前结果为empty（），并使用编写的代码在div中加载一个新窗口。但这似乎太重了...

Answer 1

如@Taplar在评论中所述，您可以将渲染图包装在iframe中。每次修改都会删除您的iframe，然后重新创建一个新的。

另一种解决方案（未经测试）可能是在读取HTML之前用$.off()取消引用所有事件监听器：

$('#resultDiv *').off();

$('#resultDIV').html(
      '<script src=\'jQuery\'><\/script>' +
      '<style>' + $('#CSS').val() + '<\/style>' +
                  $('#HTML').val() +
      '<script>' + $('#JS').val() + '<\/script>'
);

上面的示例仅针对事件侦听器显示，但是您可能还会在变量声明方面遇到很多问题。

在div中多次编辑和运行jQuery

1 个答案: