Home/ Questions/Q 8849785
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T12:44:37+00:00

I create some element by jQuery. Those elements are draggable and resizable. I can

  • 0

I create some element by jQuery. Those elements are draggable and resizable. I can delete initial element (Accordeon, Flip and Swipe). My problem is when I want to create Image object (click Image Box on top bar). I could not delete it. Could you please help me? Thanks.

Here’s my jsFiddle: http://jsfiddle.net/mV75R/

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<style>
body { margin:0px; padding:0px; border:0px; font-family:Arial, Helvetica, sans-serif; }

#PageOptions { width:240px; height:100%; border-right:1px solid #E5E5E5; margin:0px; padding:5px; background:#FFF8E7; position:absolute; }

#PageContainer { width:986px; height:676px; border:3px solid #CCC; margin:10px 10px 10px 265px; background:#F1F1F1; position:absolute; }
#AdContainer { width:460px; height:670px; border:1px dashed #666; margin:0px; position:absolute; background:#FFF; }
.ui-widget-content { width:150px; height:150px; z-index:0; }
.handle { cursor: move; background-color:#CCC; padding:0px; margin:0px; }
.ui-resizable-helper { border: 1px dotted #900; }

#ObjList {width:100%; height:80px; border-bottom:1px solid #E5E5E5; display:block; background:#F1F1F1; }
ul, li { margin:0px; padding:0px; list-style-image:none; }
li { width:50px; height:50px; border:1px solid #CCC; display:inline-block; background:#F0E8BB; margin:5px; padding:5px; overflow:hidden; font-size:12px;  border-radius: 10px; }
</style>
<script>
$(function() {

    var draggableOptions = {
        containment: "#AdContainer",
        scroll: false,
        // grid: [5, 5],
        handle: ".handle",
        snap: true,
        stack: "div",
        drag: function(event, ui) {
            var objId = $(this).attr("id");
            var objPos = $(this).position();
            $("#objName").text("Comportement: " + objId);
            $("#objTopPos").text("Marge à gauche:  " + objPos.left + "px");
            $("#objLeftPos").text("Marge en haut: " + objPos.top + "px");
        }
    };

    var resizableOptions = {
            animate: true,
            containment: "#AdContainer",
            resize: function(event, ui) {
                var objWidth = ui.size.width;
                var objHeight = ui.size.height;
                $("#objWidthSize").text("Largeur: " + objWidth + "px");
                $("#objHeightSize").text("Hauteur: " + objHeight + "px");
            },
            minHeight: 100,
            minWidth: 100,
    };

    $("#adSize").text("Taille de la publicité: " + $("#AdContainer").width() + "x" + $("#AdContainer").height());

    $(".ui-widget-content").draggable(draggableOptions).resizable(resizableOptions);

    // Obj creation
    $(".createObjImage").click(function () {
        var newObjImage = $('<div id="Image" class="ui-widget-content"><p class="handle"><span class="deleteObj">[x]</span> Image</p></div>').draggable(draggableOptions).resizable(resizableOptions);
        $("#AdContainer").append(newObjImage);
    })

    $(".deleteObj").click(function () {
        $(this).parents('.ui-widget-content').remove();
    })

});
</script>
</head>

<body> 
    <div id="ObjList">
        <ul>
            <li class="createObjImage">Image</li>
            <li class="createObjAccordeon">Accordeon</li>
            <li class="createObjSwipe">Swipe</li>
            <li class="createObjVideo">Video</li>
            <li class="createObjFlip">Flip</li>
            <li class="createObjSlider">Slider</li>
        </ul>
    </div>

    <div id="PageOptions">
        <span id="adSize"></span><br />
        ----------<br />
        <span id="objName"></span><br />
        <span id="objTopPos"></span><br />
        <span id="objLeftPos"></span><br />
        <span id="objWidthSize"></span><br />
        <span id="objHeightSize"></span>
    </div>

    <div id="PageContainer">
        <div id="AdContainer">
            <div id="Accordeon" class="ui-widget-content">
                <p class="handle"><span class="deleteObj">[x]</span> Accordeon</p>
            </div>
            <div id="Flip" class="ui-widget-content">
                <p class="handle"><span class="deleteObj">[x]</span> Flip</p>
            </div>
            <div id="Swipe" class="ui-widget-content">
                <p class="handle"><span class="deleteObj">[x]</span> Swipe</p>
            </div>
        </div>
    </div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Instead of

    $(".deleteObj").click(function () {
        $(this).parents('.ui-widget-content').remove();
    })

    there should be:

     $("#AdContainer").on('click', '.deleteObj', function () {
        $(this).parents('.ui-widget-content').remove();
    })

    Demo: http://jsfiddle.net/mV75R/1/

    .click will attach event to existing elements only. And once you add new element which should have that handler, you should attach event handler to new element explicitly. Or you can use .on like above (.live in older versions of jQuery). It will work for newly created elements also.

    Another option is to add click event handler once you create new Image element:

    $(".createObjImage").click(function () {
        var newObjImage = $('<div id="Image" class="ui-widget-content"><p class="handle"><span class="deleteObj">[x]</span> Image</p></div>').draggable(draggableOptions).resizable(resizableOptions);
        $("#AdContainer").append(newObjImage);
        $('.deleteObj', newObjImage).click(function () {
              $(this).parents('.ui-widget-content').remove();
        });
    })

    (of course, remove object code could be moved into separate function, instead of copy/paste)
    Demo: http://jsfiddle.net/mV75R/2/

    • 0