Question

我正在使用Jquery在click函数上创建div元素。还具有可拖动和可调整大小的属性。使用背景图像按预期生成div。

我还尝试使用$("#box").html("Test")在其上附加文字。但是这会导致框中没有可调整大小或可拖动。

这是我的CSS：

<style>
#mover {
        border: 2px solid;
        padding: 10px 40px;
        width: 300px;
        /*resize: both;*/
        /*overflow: auto;*/
    }

    .comp1 {
        border: 2px solid;
        width: 100px;
        height: 100px;
        position: absolute;
        background-image: url("Images/florist.png");
        background-size: cover;
        background-repeat: no-repeat;
    }

    .comp2 {
        border: 2px solid;
        width: 100px;
        height: 100px;
        position: absolute;
        background-image: url("Images/caterer.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        border-radius:50%;
    }

</style>

脚本：

<script>
        $(function () {
            $(document).ready(function () {
                $("#AddComp").click(function () {
                    $("#box").append("<div class='comp1'></div>");
                    $("#box").html("TEst");
                    $("#box .comp1").resizable({ containment: "#box" });
                    $("#box .comp1").draggable({ containment: "#box" });
                });

                $("#circle").click(function () {
                    $("#box").append("<div class='comp2'></div>");
                    $("#box .comp2").resizable({ containment: "#box" });
                    $("#box .comp2").draggable({ containment: "#box" });
                });

            });
        });
    </script>

HTML：

 <a id="AddComp">Square</a>
    &nbsp;&nbsp;&nbsp;&nbsp;<a id="circle">Circle</a>

    <div id="box" style="border:double;min-height:700px;min-width:900px">


    </div>

P.S。：我想用jquery或css在创建的div上附加文本。

Answer 1

执行此语句时

$("#box").html("Test");

您正在销毁先前在.comp1元素中创建的#box元素（.comp2元素的相同问题）。可能你可能想要

$("#box .comp1").text("Test");

作为旁注，请缓存选择器，特别是如果您需要多次使用它们，或者链接方法以避免对jQuery函数进行无用（昂贵）调用

Answer 2

您不能使盒子可调整大小或可拖动。您对其某些后代（.comp1和.comp2元素）执行此操作。

当您$("#box").html("Test")时，您正在删除这些元素并将其替换为文本节点。

您需要执行以下操作之一：

修改这些元素的内容而不是整个框的内容
append()新内容，因此它不会删除旧控件
在框中添加新元素而不是简单的文本字符串，选择新元素，然后使其可调整大小和可拖动

Answer 3

您必须将文字添加到.comp1

 $("#box .comp1").html("Test")

Jquery创建一个带有Image的div元素。不能在上面写文字 - JQUERY

3 个答案: