Databases
StackOverflow2013
Postsdbo
POCan't delete an element in jQuery after it creation
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCan't delete an element in jQuery after it creation
    primarykey
    data
    text
    <p>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.</p> <p>Here's my jsFiddle: <a href="http://jsfiddle.net/mV75R/" rel="nofollow">http://jsfiddle.net/mV75R/</a></p> <pre><code>&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &lt;title&gt;Untitled Document&lt;/title&gt; &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /&gt; &lt;script src="http://code.jquery.com/jquery-1.8.2.js"&gt;&lt;/script&gt; &lt;script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"&gt;&lt;/script&gt; &lt;style&gt; 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; } &lt;/style&gt; &lt;script&gt; $(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 = $('&lt;div id="Image" class="ui-widget-content"&gt;&lt;p class="handle"&gt;&lt;span class="deleteObj"&gt;[x]&lt;/span&gt; Image&lt;/p&gt;&lt;/div&gt;').draggable(draggableOptions).resizable(resizableOptions); $("#AdContainer").append(newObjImage); }) $(".deleteObj").click(function () { $(this).parents('.ui-widget-content').remove(); }) }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="ObjList"&gt; &lt;ul&gt; &lt;li class="createObjImage"&gt;Image&lt;/li&gt; &lt;li class="createObjAccordeon"&gt;Accordeon&lt;/li&gt; &lt;li class="createObjSwipe"&gt;Swipe&lt;/li&gt; &lt;li class="createObjVideo"&gt;Video&lt;/li&gt; &lt;li class="createObjFlip"&gt;Flip&lt;/li&gt; &lt;li class="createObjSlider"&gt;Slider&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="PageOptions"&gt; &lt;span id="adSize"&gt;&lt;/span&gt;&lt;br /&gt; ----------&lt;br /&gt; &lt;span id="objName"&gt;&lt;/span&gt;&lt;br /&gt; &lt;span id="objTopPos"&gt;&lt;/span&gt;&lt;br /&gt; &lt;span id="objLeftPos"&gt;&lt;/span&gt;&lt;br /&gt; &lt;span id="objWidthSize"&gt;&lt;/span&gt;&lt;br /&gt; &lt;span id="objHeightSize"&gt;&lt;/span&gt; &lt;/div&gt; &lt;div id="PageContainer"&gt; &lt;div id="AdContainer"&gt; &lt;div id="Accordeon" class="ui-widget-content"&gt; &lt;p class="handle"&gt;&lt;span class="deleteObj"&gt;[x]&lt;/span&gt; Accordeon&lt;/p&gt; &lt;/div&gt; &lt;div id="Flip" class="ui-widget-content"&gt; &lt;p class="handle"&gt;&lt;span class="deleteObj"&gt;[x]&lt;/span&gt; Flip&lt;/p&gt; &lt;/div&gt; &lt;div id="Swipe" class="ui-widget-content"&gt; &lt;p class="handle"&gt;&lt;span class="deleteObj"&gt;[x]&lt;/span&gt; Swipe&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USF__M
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POCan't delete an element in jQuery after it creation
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThe .click() creates a click-eventhandler for the matched elements, it does not assign the handler to future objects that may match. http://api.jquery.com/on/ you can use 'delegated' events to circumvent this, or attach the click event handler as you create the new objects.
      singulars
      1. POCan't delete an element in jQuery after it creation
      1. USToni
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload