HTML Adding An Element With JQuery Properties Using JavaScript

Question

I don't know if the title is very clear but I have an HTML page which has a div on it that is using the JQuery draggable feature.

It works as I expect but if I try to add the same element using JavaScript it is not draggable like the one that is added statically.

I have my HTML page

<!DOCTYPE html>
<html>

    <!-- JQUERY LIBRARIES -->
    <script src="assets/jquery/jquery-1.12.0.min.js"></script>
    <script src="assets/jquery/jquery-ui-1.11.4/jquery-ui.js"></script>

    <!-- CUSTOM -->
    <script src="scripts/main.js"></script>

    <!-- STYLE -->
    <style>
        .object { background-color:#333333 ; width:100px ; height:60px ; }
    </style>

<body>

    <!-- DRAG WORKS ON THIS DIV -->
    <div class="object ui-widget-content"></div>

    <!-- CREATE ANOTHER ONE -->
    <button onclick="newObject()">NEW OBJECT</button>

</body>
</html>

Inside my main.js I have

$(document).ready(function() {

    // APPLY JQUERY DRAGGABLE TO CLASS
    $(".object").draggable();

});

function newObject() {

    // CREATE A DIV LIKE THE ONE THAT EXISTS
    var object     = document.createElement("div");

    // CREATE CLASS LIKE THE DIV HAS FOR STYLE
    var styleClass = "object";

    // CREATE SECOND CLASS FOR DRAGGABLE LIKE THE DIV HAS
    var dragClass  = " ui-widget-content";

    // EXECUTE ABOVE
    object.className += styleClass;
    object.className += dragClass;
    document.body.appendChild(object);

}

When the button is clicked it creates a div although the div it creates is not draggable like the one that already exists.

Why is this and is there a way around it?

kapantzak · Accepted Answer · 2016-03-09 15:33:21Z

2

You have to initiate the plugin after the new element is appended to the DOM

function newObject() {

    // CREATE A DIV LIKE THE ONE THAT EXISTS
    var object     = document.createElement("div");

    // CREATE CLASS LIKE THE DIV HAS FOR STYLE
    var styleClass = "object";

    // CREATE SECOND CLASS FOR DRAGGABLE LIKE THE DIV HAS
    var dragClass  = " ui-widget-content";

    // EXECUTE ABOVE
    object.className += styleClass;
    object.className += dragClass;
    document.body.appendChild(object);

    $('.ui-widget-content').draggable();

}

EXPLANATION

On the first initialization (on document.ready) the plugin is applied only to the elements that are present at the DOM at that time.

So, when you append a new element after you have initialized the plugin, you have to initialize the plugin for every newly added element.

edited Mar 9, 2016 at 15:33

answered Mar 9, 2016 at 15:29

kapantzak

11.8k5 gold badges42 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TheLovelySausage Over a year ago

Wow, my stupidity knows no bounds, this indeed fixed it. I have to wait 10min before I can accept this as the correct answer

kerwan · Accepted Answer · 2016-03-09 15:34:38Z

2

You must call the draggable() function on your newly created div

the $(document).ready() function is called once, when the page is loaded, and so the draggable function is only applied to the existing elements.

So when you create a new element, you have to call the draggable function on this one too.

To do so you can assign an id to your div and then call the draggable function after the insertion in the DOM :

object.id = "someRandomId";
$('#someRandomId').draggable();

Or reapply the draggable function to the objects who doesn't have the "ui-draggable" :

document.body.appendChild(object);
$('.object').not('.ui-draggable').draggable();

this solution is better because it works even if you add several divs at once.

edited Mar 9, 2016 at 15:34

answered Mar 9, 2016 at 15:29

kerwan

75410 silver badges22 bronze badges

Collectives™ on Stack Overflow

HTML Adding An Element With JQuery Properties Using JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related