HTML 和 CSS 更改的实时预览答案

【问题标题】：Live Preview of HTML and CSS changesHTML 和 CSS 更改的实时预览
【发布时间】：2014-08-09 13:51:05
【问题描述】：

我正在尝试在 wordpress 插件中集成 Live HTML 和 CSS 元素预览。
我想出的基本结构如下但是不行，可能是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>

如果有人可以向我推荐任何能够在编辑时实时预览 CSS 元素的 jquery 插件，那将不胜感激......

提前谢谢...

【问题讨论】：

你用的是什么版本的jQuery，.live已经从最新版本的jquery中删除了。
我使用的是 1.11.1 版本
Mritunjay.. 我得到了解决方案。看来我需要使用 jquery 1.7.1 版来实现 .live 功能。感谢你的帮助。我非常感谢它。
版本1.11.1没有.live功能，请看答案中的demo。
不要使用旧版本的 jQuery，只需使用 on，在 Wordpress 中 jQuery 处于无冲突模式。

标签： javascript jquery html css wordpress

【解决方案1】：

.live 函数已从 jquery 1.9 中删除，因此它在 jquery1.11.1 中不存在，请改用 .on。

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

其他一切正常。

DEMO

【讨论】：