从 .css 移动到 jQuery css()，在动态添加元素时不起作用答案

【问题标题】：Moving from .css to jQuery css(), not working when elements are added on the fly从 .css 移动到 jQuery css()，在动态添加元素时不起作用
【发布时间】：2011-12-15 10:07:33
【问题描述】：

在您对此发表评论之前，我知道最好有一个单独的 CSS 文件以实现可维护性。但我需要使用 没有任何 CSS 或图像的 Jcrop 插件，所有这些都应嵌入到单个 croppable.js 文件中。

问题是：css不适用于由Jcrop动态添加的元素（一些divs与.jcrop-vline、.jcrop-hline和其他类)。

我做了什么：我在原始 Jcrop 包中删除了原始 jquery.Jcrop.css 文件和 base64 编码 Jcrop.gif。生成的croppable.js 是：

$(document).ready(function() {
    var cropborder64 = "data:image/gif;base64,dasn/%£"; // Crop image (cutted)

    $(".jcrop-holder").css({"text-align" : "left"});

    $(".jcrop-vline, .jcrop-hline").css({
        "font-size"  : "0px",
        "position"   : "absolute",
        "background" : "white url(" + cropborder64 + ") top left repeat",
        "height"     : "100%",
        "width"      : "1px !important"
    });

    $(".jcrop-vline.right").css({ "right" : "0px" });
    $(".jcrop-hline.bottom").css({ "bottom" : "0px" });

    $(".jcrop-handle").css({
        "font-size"        : "1px",
        "width"            : "7px !important",
        "height"           : "7px !important",
        "border"           : "1px #eee solid",
        "background-color" : "#333"
    });

    $(".jcrop-tracker").css({ "width"  : "100%", "height" : "100%" });
    $(".custom.jcrop-vline, .custom.jcrop-hline").css({
        "background" : "yellow"
    });

    $(".custom.jcrop-handle").css({
        "border-color"          : "black",
        "background-color"      : "#C7BB00",
        "-moz-border-radius"    : "3px",
        "-webkit-border-radius" : "3px"
    });
}); // End of document.ready

这就是我使用它的方式：

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
        <script src="../js/jquery-1.7.1.min.js" type="text/javascript"></script>
        <script src="../js/jquery.Jcrop.min.js" type="text/javascript"></script>
        <script src="../js/croppable.js" type="text/javascript"></script>
        <script>
            $(document).ready(function() {
                $('img.crop').each(function() {
                    $(this).Jcrop();
                });
            }); // End of document.ready
        </script>
    </head>
    <body>
        <img class="crop" src="../images/test.jpg" alt="" />
    </body>
</html>

【问题讨论】：

您是否尝试过创建<style />-tag 并将其添加到文档中？这至少会让你摆脱所有固定的 css。它也会影响生成的元素。

标签： javascript jquery css jquery-plugins jcrop

【解决方案1】：

我认为您需要将所有内容放在每次添加元素时调用的函数中。

编辑：

类似的东西：

$(function() {
    var cropborder64 = "data:image/gif;base64,dasn/%£";

    function reload(){

        $(".jcrop-holder").css({"text-align" : "left"});

        $(".jcrop-vline, .jcrop-hline").css({
            "font-size"  : "0px",
            "position"   : "absolute",
            "background" : "white url(" + cropborder64 + ") top left repeat",
            "height"     : "100%",
            "width"      : "1px !important"
        });

        $(".jcrop-vline.right").css({ "right" : "0px" });
        $(".jcrop-hline.bottom").css({ "bottom" : "0px" });

        $(".jcrop-handle").css({
            "font-size"        : "1px",
            "width"            : "7px !important",
            "height"           : "7px !important",
            "border"           : "1px #eee solid",
            "background-color" : "#333"
        });

        $(".jcrop-tracker").css({ "width"  : "100%", "height" : "100%" });
        $(".custom.jcrop-vline, .custom.jcrop-hline").css({
            "background" : "yellow"
        });

        $(".custom.jcrop-handle").css({
            "border-color"          : "black",
            "background-color"      : "#C7BB00",
            "-moz-border-radius"    : "3px",
            "-webkit-border-radius" : "3px"
        });

    }
    reload();

    $('#addNewElementButton').on({
        click: function(){
            $('.crop').append('<img class="crop" src="../images/test.jpg" alt="" />');
            reload();
        }
    });

});

【讨论】：

您能否发布一些代码示例并更好地解释为什么我的解决方案不起作用？
您的 JS 只被调用一次，因此您的 CSS 在开始时应用，当您添加一个元素时，您需要再次调用您的 JS 以将您的 css 放入该新元素。我将用一个例子来编辑我的消息。