I set up this and this fiddle to show that my cloned “program window” was not getting its drop elements registered by this
$( ".pg-droppable" ).on( "drop", function(event, ui) {
event handler function attachment (now and in the future).
In the fiddles this worked. If you go to my site you will see that you can drop either of the widgets in the left panel into the “program window” on the right. But if you toggle the “program window”, the clone, “program windowtest” is behind it and you are not able to drop anything into it.
Can someone please explain to me why the clone “program window” doesn’t get it’s droppable elements registered by the .on() code above?
Here is the complete widgetPallet code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel = "stylesheet" href = "../styles/InandriasMenus.css" media="screen, projection" type = "text/css">
<link rel = "stylesheet" href = "../styles/inandriasPrograms.css" media="screen, projection" type = "text/css">
<link rel = "stylesheet" href = "../styles/jquery-ui-1.8.22.custom.css" media="screen, projection" type = "text/css">
<link rel = "stylesheet" href = "../styles/jquery.contextMenu.css" type = "text/css" />
<link rel = "stylesheet" href = "../styles/jquery.ui.button.css" type = "text/css" />
<link rel = "stylesheet" href = "../styles/jquery.ui.autocomplete.css" type = "text/css" />
<!-- <script src="http://www.inandrias.com/testbiz/inandrias.biz/javascripts/jquery.js" type="text/javascript"></script> -->
<!-- This loads the latest version in the 1. series -->
<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> -->
<!-- This loads the latest version in the 1.7 series -->
<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> -->
<!-- This loads the 1.7.2 version. Best solution for production environment
but should be set to the latest version when going into production -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- This saves the loaded version or uses the save in the event googleapis is down -->
<script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script>
<script src="../javascripts/jquery-ui-1.8.22.custom.min.js" type="text/javascript"></script>
<!-- These scripts are for Amend/Refresh menu functions -->
<script src="../javascripts/jquery.ui.dialog.js" type="text/javascript"></script>
<script src="../javascripts/jquery.ui.autocomplete.js" type="text/javascript"></script>
<script src="../javascripts/jquery.ui.button.js" type="text/javascript"></script>
<script src="../javascripts/jquery.ui.combobox.js" type="text/javascript"></script>
<script src="../javascripts/jquery.contextMenu.js" type="text/javascript"></script>
<script src="../javascripts/ajaxLogtail.js" type="text/javascript"></script>
<style>
.pg-draggable { display:block; color: #3399FF; border-radius:4px; border:1px solid #ACE; font-size:13px; padding:5px 1px 5px 3px; margin:0 5px 5px; z-index: 1000; }
</style>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function documentLoad() {
document.getElementById('programWindow').style.display="block";
$('#widgets').show();
$('#programWindow').clone().attr('id', 'programWindow' + 'test').appendTo('#menudiv').show();
}
$(function() {
$( ".pg-draggable" ).draggable({
helper: 'clone',
revert: 'invalid',
cancel: null,
opacity: 0.8,
scroll: true
});
$( ".pg-droppable" ).droppable({
accept: ".pg-draggable",
activeClass: "ui-state-hover",
hoverClass: "ui-state-active"
});
$( ".pg-droppable" ).on( "drop", function(event, ui) {
alert($( this ).attr( "id" ));
$draggedItem = ui.draggable.clone();
$draggedItem.insertAfter( $(this) );
});
});
-->
</SCRIPT>
</head>
<body onload="javascript: documentLoad()">
<div id="menudiv"> <button onclick="$('#programWindow').toggle();">Toggle program window</button></div>
<div id="programWindow" class="programWindow">
<table style="display: inline-block; float: left;">
<tbody>
<tr>
<td class="NOTpg-droppable" id="dropCellCount001">
<table>
<tbody>
<tr>
<td class="pg-droppable" id="dropCellCount002">
<label for="Insurer">Insurer</label>
<input id="Insurer" name="Insurer" title="Select the Insurer on this policy" tabindex="1" readonly="readonly" autocomplete="off" placeholder="Insurer" maxlength="10" autofocus="" type="text">
</td>
<td class="pg-droppable padbot3" id="dropCellCount003" valign="bottom">
<label for="SelectInsurer"> </label>
<br>
<a href="#" id="Insurer_1" class="selectBttnA" name="Insurers"><span> </span></a>
</td>
<td class="pg-droppable" id="dropCellCount004" style="text-align:right; line-height: 15px;" valign="bottom">
<label for="Policy<br ></label>number">Policy<br>number</label>
</td>
<td class="pg-droppable" id="dropCellCount005" colspan="2" valign="bottom">
<input id="PolicyNumber" onfocus="enableInput('PolicyNumber')" onblur="disableInput('PolicyNumber')" class="w140" name="PolicyNumber" title="Lead Insurer's policy number" tabindex="2" autocomplete="off" placeholder="Policy number" maxlength="20" style="text-transform: uppercase;" type="text">
</td>
</tr>
<tr>
<td class="pg-droppable" id="dropCellCount006">
<label for="Product">Product</label>
<input id="Product" name="Product" title="Select this policy's Product" tabindex="3" readonly="readonly" autocomplete="off" placeholder="Product" maxlength="10" type="text">
</td>
<td class="pg-droppable padbot3" id="dropCellCount007" valign="bottom">
<label for="SelectProduct"> </label>
<br>
<a href="#" id="Product_1" class="selectBttnA" data="ICode #Insurer" name="Products"><span> </span></a>
</td>
<td class="pg-droppable" id="dropCellCount008" style="text-align:right; line-height: 15px;" valign="bottom">
<label for="Pay<br ></label>method">Pay<br>method</label>
</td>
<td class="pg-droppable" id="dropCellCount009" valign="bottom">
<input id="PayMethod" name="PayMethod" title="Select this policy's default pay method" tabindex="4" readonly="readonly" autocomplete="off" placeholder="Pay method" maxlength="3" type="text">
</td>
<td class="pg-droppable padbot3" id="dropCellCount010" valign="bottom">
<label for="SelectPay<br ></label>method"> </label>
<br>
<a href="#" id="PayMethod_1" class="selectBttnA" name="PayMethods"><span> </span></a>
</td>
</tr>
<tr>
<td class="pg-droppable" id="dropCellCount011" colspan="3">
<hr>
</td>
</tr>
<tr>
<td class="pg-droppable" id="dropCellCount012">
<label for="Client">Client</label>
<input id="Client" name="Client" title="Select the policy's Client" tabindex="5" readonly="readonly" autocomplete="off" placeholder="Client code" maxlength="20" type="text">
</td>
<td class="pg-droppable padbot3" id="dropCellCount013" valign="bottom">
<label for="PersonalClientsClient">Personal </label>
<br>
<a href="#" id="Client_1" class="selectBttnA" name="PersonalClients"><span> </span></a>
</td>
<td class="pg-droppable padbot3" id="dropCellCount014" valign="bottom">
<label for="CommercialClientsClient">Commercial </label>
<br>
<a href="#" id="Client_1" class="selectBttnA" name="CommercialClients"><span> </span></a>
</td>
<td class="pg-droppable padbot3" id="dropCellCount015" valign="bottom">
<label for="ClientsClient">Filter </label>
<br>
<a href="#" id="Client_1" class="selectBttnA filter" name="Clients"><span> </span></a>
</td>
</tr>
<tr></tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td class="pg-droppable" id="dropCellCount016">
<label for="Insured">Insured</label>
<input id="ClientName" class="width350" name="ClientName" title="Enter the insured's name" tabindex="6" readonly="readonly" autocomplete="off" placeholder="Insured's name" type="text">
</td>
</tr>
<tr>
<td class="pg-droppable" id="dropCellCount017" colspan="1">
<hr>
</td>
</tr>
<tr></tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td class="pg-droppable" id="dropCellCount018" valign="bottom">
<span class="textColor">Policy dates</span>
</td>
<td class="pg-droppable" id="dropCellCount019">
<label for="Inception">Inception</label>
<input id="Inception" class="datepicker hasDatepicker" name="Inception" title="Select the policy's inception date" tabindex="7" readonly="readonly" autocomplete="off" placeholder="Inception" maxlength="10" type="text">
</td>
<td class="pg-droppable" id="dropCellCount020">
<label for="Next renewal">Next renewal</label>
<input id="NextRenewal" class="datepicker hasDatepicker" name="NextRenewal" title="Select the policy's next renewal date" tabindex="8" readonly="readonly" autocomplete="off" placeholder="Renewal" maxlength="10" type="text">
</td>
</tr>
<tr></tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td class="pg-droppable" id="dropCellCount021">
<label for="Notes">Notes</label>
<input id="notes" class="width350" name="notes" title="Annotate the new policy as required" tabindex="9" readonly="readonly" autocomplete="off" placeholder="Policy note" type="text">
</td>
</tr>
<tr></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table style="display: inline-block;">
<tbody>
<tr>
<td class="NOTpg-droppable" id="dropCellCount022">
<table>
<tbody>
<tr id="AgentClone-1">
<td class="pg-droppable" id="dropCellCount023">
<label for="Agent">Agent</label>
<input id="Agent-1" class="multiLine" name="Agent-1" title="Select the Agents for this policy (right-click the button to remove an Agent from the list)" tabindex="10" readonly="readonly" autocomplete="off" placeholder="Agent" maxlength="6" type="text">
</td>
<td class="pg-droppable padbot3" id="dropCellCount024" valign="bottom">
<label for="SelectAgent"> </label>
<br>
<a href="#" id="Agent-1_1" class="selectBttnA" data-selectname="Agent" name="AccountExecutives"><span> </span></a>
</td>
<td class="pg-droppable" id="dropCellCount025" style="text-align:right; line-height: 15px;" valign="bottom">
<label for="Agent's<br ></label>commission %">Agent's<br>commission %</label>
</td>
<td class="pg-droppable" id="dropCellCount026" valign="bottom">
<input id="AEcommPerc-1" name="AEcommPerc-1" title="Leave the Agent's commission % for this policy empty to use the default commission %" tabindex="11" autocomplete="off" placeholder="Agent's %" maxlength="5" style="Currency" type="text">
</td>
<td class="pg-droppable padbot3" id="dropCellCount027" valign="bottom">
<label for="SelectAgent's<br ></label>commission %"> </label>
<br>
<a href="#" id="AEcommPerc-1_1" class="" data="AEcode=Agent-1" name="AccountExecutives: AEcommPerc"><span> </span></a>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Program generator widgets -->
<fieldset id="widgets" class="menuAbuttons">
<input class="pg-draggable" type="text" placeholder="Input field" readonly="readonly" title="Drag this onto the program window to insert a new input field">
<a href="#" class="menuA pg-draggable" name="level02" title="Drag this onto the program window to insert a new select button"><span>Select button</span></a>
</fieldset>
</body>
</html>
The fast solution is to replace
with
ondoesn’t simply work likelive: you have to set the delegation on elements that will be there and be parents of the target.