0
我設置this和this小提琴表明我的分身「程序窗口」沒有得到這個克隆DIV不是在DOM
$(".pg-droppable").on("drop", function(event, ui) {
事件處理函數，附件（註冊現將其下降的元素，並在註冊未來）。
在小提琴這工作。如果您轉到my site，您會看到可以將左側面板中的任一小部件放到右側的「程序窗口」中。但是如果你切換到「程序窗口」，克隆，「程序windowtest」就在它後面，你不能放下任何東西。
有人可以向我解釋爲什麼克隆「程序窗口」沒有得到它通過上面的.on（）代碼註冊的可丟棄元素？
下面是完整的widgetPallet代碼：
<!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>
謝謝你dystroy。我做了改變，但仍然是一樣的。似乎克隆的「programWindow」的可丟棄區域沒有被委派。在我的簡單大腦中，我會製作$（「.pg-droppable」）.droppable（{使用.on委託人，但我看不到如何？ – cneeds
我不知道可拖放和可拖動的API，但是不應該也調用'$（「.pg-droppable」）.droppable（{...'在克隆之後再次調用？ –
正確。謝謝 – cneeds