0

我设置了这个这个小提琴来表明我克隆的“程序窗口”没有得到它注册的放置元素

$( ".pg-droppable" ).on( "drop", function(event, ui) {

事件处理函数附件(现在和将来)。

在小提琴中,这奏效了。如果您访问我的网站,您会看到您可以将左侧面板中的任何一个小部件拖放到右侧的“程序窗口”中。但是如果你切换“程序窗口”,克隆,“程序窗口测试”就在它后面,你不能把任何东西放进去。

有人可以向我解释为什么克隆“程序窗口”没有得到上面 .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">&nbsp;</label>
<br>
<a href="#" id="Insurer_1" class="selectBttnA" name="Insurers"><span>&nbsp;</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">&nbsp;</label>
<br>
<a href="#" id="Product_1" class="selectBttnA" data="ICode #Insurer" name="Products"><span>&nbsp;</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">&nbsp;</label>
<br>
<a href="#" id="PayMethod_1" class="selectBttnA" name="PayMethods"><span>&nbsp;</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&nbsp;&nbsp;</label>
<br>
<a href="#" id="Client_1" class="selectBttnA" name="PersonalClients"><span>&nbsp;</span></a>
</td>
<td class="pg-droppable padbot3" id="dropCellCount014" valign="bottom">
<label for="CommercialClientsClient">Commercial&nbsp;&nbsp;</label>
<br>
<a href="#" id="Client_1" class="selectBttnA" name="CommercialClients"><span>&nbsp;</span></a>
</td>
<td class="pg-droppable padbot3" id="dropCellCount015" valign="bottom">
<label for="ClientsClient">Filter&nbsp;&nbsp;</label>
<br>
<a href="#" id="Client_1" class="selectBttnA filter" name="Clients"><span>&nbsp;</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">&nbsp;</label>
<br>
<a href="#" id="Agent-1_1" class="selectBttnA" data-selectname="Agent" name="AccountExecutives"><span>&nbsp;</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 %">&nbsp;</label>
<br>
<a href="#" id="AEcommPerc-1_1" class="" data="AEcode=Agent-1" name="AccountExecutives: AEcommPerc"><span>&nbsp;</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>
4

1 回答 1

1

快速的解决方案是更换

$( ".pg-droppable" ).on( "drop", function(event, ui) {

$(document).on("drop", ".pg-droppable", function(event, ui) { // replace document with more precise if available

on不仅仅像这样工作live:您必须在将存在并成为目标父级的元素上设置委托。

于 2013-01-12T11:06:47.833 回答