Javascript HTML和CSS更改的实时预览_Javascript_Jquery_Html_Css_Wordpress

Javascript HTML和CSS更改的实时预览

javascript jquery html css wordpress

Javascript HTML和CSS更改的实时预览,javascript,jquery,html,css,wordpress,Javascript,Jquery,Html,Css,Wordpress,我正在尝试将Live HTML和CSS元素预览集成到wordpress插件中。我提出的基本结构如下，但它不工作，可能是js错误以下是JS代码： <script type="text/javascript"> $(function() { function GetHtml(){ var html = $('.html').val(); return html; }

我正在尝试将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>


$（函数（）{
函数GetHtml（）{
var html=$（'.html'）.val（）；
返回html；
}
函数GetCss（）{
var Css=$（'.Css'）.val（）；
返回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（''+css+''）；
});
});

下面是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元素，那将是非常感谢的

先谢谢你

函数已从

jquery 1.9

中删除，因此它不在

jquery1.11.1

中，请改用

.on

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

其他一切都很好

您使用的是哪个版本的jQuery，

.live

已从最新版本的jQuery中删除。我使用的是版本1.11.1Mritunjay。。我找到了解决办法。看起来我需要使用jquery版本1.7.1来实现.live功能。谢谢你的帮助。非常感谢。版本

1.11.1

没有

。live

功能，请参见答案中的演示。不要使用较旧版本的jQuery，只需在

上使用，而在Wordpress中，jQuery处于无冲突模式。