CODEWITHSUNDEEP
jqueryhtmlcssjquery-ui
Abhishek Ghosh
Abhishek Ghosh

Reputation: 2706

Jquery which creates a div element with Image on it. Cannot write Text on it - JQUERY

I am creating div elements on the click function using Jquery. Also with the properties of draggable and resizable. The div gets generated as expected with background image.

I am also trying to append text on it with $("#box").html("Test") .But this results into the box not getting resizable or draggable .

Here is my 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 : 

<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. : I want to append text on the created div with jquery or css .

Upvotes: 0

Views: 99

Answers (3)

Tushar Gupta
Tushar Gupta

Reputation: 15923

you must add the text to .comp1 

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

Upvotes: 0

Quentin
Quentin

Reputation: 943645

You aren't making the box resizable or draggable. You're doing that to some of its descendants (.comp1 and .comp2 elements).

When you $("#box").html("Test"), you are deleting those elements and replacing them with a text node.

You need to do one of:

  • modify the content of those elements instead of the content of the whole box
  • append() the new content so it doesn't remove the old controls
  • put new elements in the box instead of a simple string of text, select the new elements, then make them resizable and draggable

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

when this statement is executed

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

you are destroying the .comp1 element you previously created into your #box element (same issue for .comp2 element). Probably you may want instead

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

As a side note, cache your selectors, especially if you need to use them several times, or chain the methods so to avoid useless (expensive) calls to the jQuery function

Upvotes: 2

Related Questions