Question

我正在尝试将Live HTML和CSS元素预览集成到wordpress插件中我提出的基本结构如下，但它不起作用，可能是一个js错误......

这是JS代码：

<script type="text/javascript">
    $(function() {
        function GetHtml(){
                var html = $('.html').val();
                return html;
            }

        function GetCss(){
                var Css = $('.css').val();
                return Css;
            }

        $('.innerbox').live("keyup",function(){

            var targetp = $('#previewTarget')[0].contentWindow.document;
            targetp.open();
            targetp.close();

                var html = GetHtml();
                var css = GetCss();

                $('body',targetp).append(html);
                $('head', targetp).append('<style>' + css + '</style>');

            });
    });
</script>

以下是html代码..

<div id="mainWrapper">
    <div id="box">
        <textarea class="innerbox html"></textarea>
        <textarea class="innerbox css"></textarea>

        <div class="innerbox preview">
            <iframe id="previewTarget">
                <!DOCTYPE html>
                <html lang="en">
                <head>
                <meta charset="utf-8">
                </head>
                <body>
                    <p>hey</p>
                </body>
                </html>
            </iframe>
        </div>
    </div>
</div>

如果有人可以推荐我任何jquery插件，可以在编辑时实现CSS元素的实时预览，那将非常感激......

提前致谢...

Answer 1

.live功能已从jquery 1.9移除，因此jquery1.11.1使用.on时不会显示该功能。

$('.innerbox').on("keyup",function(){...})

其他一切正常。

DEMO

HTML和CSS更改的实时预览

1 个答案: