Question

我通过jQuery创建一些元素。这些元素是可拖动和可调整大小的。我可以删除初始元素（Accordeon，Flip和Swipe）。我的问题是当我想创建Image对象时（单击顶部栏上的Image Box）。我无法删除它。请你帮助我好吗？感谢。

<!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>

Answer 1

而不是

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

应该有：

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

演示：http://jsfiddle.net/mV75R/1/

.click只会将事件附加到现有元素。一旦添加了应该具有该处理程序的新元素，就应该明确地将事件处理程序附加到新元素。或者您可以使用上面的.on（.live在旧版本的jQuery中）。它也适用于新创建的元素。

另一个选择是在创建新的Image元素后添加click事件处理程序：

$(".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();
        });
    })

（当然，删除对象代码可以移动到单独的函数中，而不是复制/粘贴）演示：http://jsfiddle.net/mV75R/2/

创建后无法在jQuery中删除元素

1 个答案: