創建jQuery後無法刪除元素

我通過jQuery創建了一些元素。這些元素是可拖動和可調整大小的。我可以刪除初始元素（Accordeon，Flip和Swipe）。我的問題是當我想創建圖像對象（單擊頂部欄上的圖像框）。我無法刪除它。你可以幫我嗎？謝謝。創建jQuery後無法刪除元素

這裏是我的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>

來源

2012-11-18 F__M

.click（）爲匹配的元素創建click事件處理程序，它不會將處理程序分配給可能匹配的未來對象。 http://api.jquery.com/on/您可以使用「委託」事件來規避此問題，或者在創建新對象時附加單擊事件處理程序。 – Toni

而不是

$(".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（老版本的jQuery中的.live）。它也適用於新創建的元素。

另一種選擇是，一旦你創建新的圖像元素添加單擊事件處理程序：

$(".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/

來源

2012-11-18 14:18:44

感謝FAngel和Toni。 –

創建jQuery後無法刪除元素

回答

相關問題