如何在克隆元素上应用事件
How to apply events on cloned elements?
有人能帮我一下吗?
我正在尝试做一个订购系统，一切都很顺利，但是我们的顾问指出，我们需要让用户有一个选择，在一次交易中订购多个项目。这让我很困惑。我在谷歌上搜索了很多关于JQueries和JScripts的信息，但是我最终进入了死胡同。
我现在有:
HTML (orderform.html):<html>
<head> <link rel="stylesheet"
type="text/css"
href="css/contentFrame.css">
<script src="jscript/protoScript.js"></script>
<script src="jscript/jquery-1.11.3.js"></script>
<script src="jscript/JQueryTest.js"></script>
</head>
<meta charset="utf-8">
<title>Untitled Document</title>
<body>
<div class="formBlock">
<h2 id="formHeader">Order Form</h2>
<form method="POST" action="orderInfoReceiver.php">
<table align="center">
<tr>
<td height="100%">
<fieldset>
<legend>Contact Details</legend>
Last Name:
<br>
<input type="text" name="lName">
<br>
First Name:
<br>
<input type="text" name="fName">
<br>
Middle Name:
<br>
<input type="text" name="mName">
<br>
Email Address:
<br>
<input type="text" name="email">
</fieldset>
</td>
<td height="100%">
<fieldset>
<br>
<legend>Product Information</legend>
<div id="input1" style="margin-bottom:4px;" class="clonedInput">
Item Name:
<br>
<select id="product" name="product" onchange="setOptions()">
<option>Please Select an Item
<option>Dry Chemical
<option>HCFC 123 (Manual)
<option>HCFC 123 (Therman)
<option>HCFC 123 (Ceiling)
<option>HCFC 236 fa (Manual)
<option>HCFC 236 fa (Therman)
<option>HCFC 236 fa (Ceiling)
<option>AFFF (Steel Cylinder)
<option>AFFF (Stainless Cylinder)
<option>CO2 (Carbon Dioxide)
</select>
<br>
Capacity:
<br>
<select id="capacity" name="capacity">
<option> --
</select>
<input type="radio" name="type" value="New">New <input type="radio" name="type" value="Refill">Refill
<br>
<br>
Quantity:
<br>
<input type="number" min="0" name="quantity">
<br>
<br>
<br>
</div>
<input type="button" id="btnAdd" value="+"> <input type="button" id="btnDel" value="-">
</fieldset>
</td>
<td height="100%">
<fieldset>
<br>
<br>
<legend>Address</legend>
Street:
<br>
<input type="text" name="street">
<br>
<br>
City:
<br>
<input type="text" name="city">
<br>
<br>
<br>
</fieldset>
</td>
</tr>
</table>
<center><input type="submit" value="Submit"></center>
</form>
<br>
</div>
</body>
JQuery(JQueryTest.js)取自http://charlie.griefer.com并稍作修改。我有很多克隆的代码，但这是唯一一个我设法得到工作与我目前的形式。
$(document).ready(function() {
$('#btnAdd').click(function() {
var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
var newNum = new Number(num + 1); // the numeric ID of the new input field being added
// create the new element via clone(), and manipulate it's ID using newNum value
var newElem = $('#input' + num).clone(true, true).attr('id', 'input' + newNum);
// manipulate the name/id values of the input inside the new element
newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
// insert the new element after the last "duplicatable" input field
$('#input' + num).after(newElem);
// enable the "remove" button
$('#btnDel').removeAttr('disabled');
// business rule: you can only add 5 names
if (newNum == 5)
$('#btnAdd').attr('disabled','disabled');
});
$('#btnDel').click(function() {
var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
$('#input' + num).remove(); // remove the last element
// enable the "add" button
$('#btnAdd').removeAttr('disabled');
// if only one element remains, disable the "remove" button
if (num-1 == 1)
$('#btnDel').attr('disabled','disabled');
});
$('#btnDel').attr('disabled','disabled');
});
JScript(protoScript.js)我也得到了这个从搜索，但我忘记了什么网站:
function addOption(selectId) {
var x = document.getElementById(selectId);
var y = new Option('Test option W3C');
x.add(y,x.options[x.options.length]);
// for IE use x.add(y,2);
}
function appendOptionLast(selectID, num){
var elSel = document.getElementById(selectID);
var elOptNew = document.createElement('option');
elOptNew.text = num;
elOptNew.value = num;
try {
elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
}
catch(ex) {
elSel.add(elOptNew); // IE only
}
}
function removeAllOptions(selectID){
var elSel = document.getElementById(selectID);
elSel.options.length = 0
if (elSel.length > 0){
elSel.remove(0);
}
}
function addAllOptions(selectID, values){
var arrayLength = values.length;
for (var i = 0; i < arrayLength; i++) {
appendOptionLast(selectID,values[i]);
}
}
function setOptions(){
var product = document.getElementById("product");
// removeAllOptions('capacity');
document.getElementById('capacity').options.length = 0
var selIndex = product.selectedIndex;
if(selIndex == 1)
addAllOptions('capacity', ["2 lbs","3 lbs", "5 lbs", "10 lbs", "15 lbs", "20 lbs", "50 lbs", "100 lbs", "150 lbs", "200 lbs"]);
else if(selIndex == 2){
addAllOptions('capacity', ["3 lbs", "5 lbs", "10 lbs", "15 lbs", "20 lbs", "50 lbs"]);
}
else if(selIndex == 3){
addAllOptions('capacity', ["10 lbs", "15 lbs", "20 lbs"]);
}
else if(selIndex == 4){
addAllOptions('capacity', ["10 lbs", "20 lbs"]);
}
else if(selIndex == 5){
addAllOptions('capacity', ["3 lbs", "5 lbs", "10 lbs", "15 lbs", "20 lbs", "50 lbs"]);
}
else if(selIndex == 6){
addAllOptions('capacity', ["3 lbs", "5 lbs", "10 lbs", "15 lbs", "20 lbs", "50 lbs"]);
}
else if(selIndex == 7){
addAllOptions('capacity', ["3 lbs", "5 lbs", "10 lbs", "15 lbs", "20 lbs", "50 lbs"]);
}
else if(selIndex == 8){
addAllOptions('capacity', ["10 lbs", "15 lbs", "20 lbs", "25 lbs", "50 lbs", "100 lbs", "200 lbs"]);
}
else if(selIndex == 9){
addAllOptions('capacity', ["20 lbs", "25 lbs", "50 lbs"]);
}
else if(selIndex == 10){
addAllOptions('capacity', ["5 lbs", "10 lbs", "15 lbs", "50 lbs"]);
}
else{
addAllOptions('capacity', ["--"]);
}
}
我遇到了一个死胡同，让<select id='product>'上的事件onchange也与克隆表单一起工作。
我也试过使用clone(true, true)，但不能使它工作。
我也有自定义css，它只包含非常基本的设计，所以我认为没有必要包括。
请注意，如果我没记错的话，我们只教过基本的HTML，直到表单，基本的PHP, Java, c#和SQL。这是我第一次尝试编码JScripts和JQueries，我有一个困难的时间。
这是一个工作示例(我已经删除了大多数与问题无关的HTML)。
首先，元素id必须在整个html文档中是唯一的;所以我从select s中删除了id 's。
然后，只需将正确的元素传递给onchange中的setOptions:
<select name="product" onchange="setOptions(this)">
在setOptions(product)中，我们也改变了代码，使用相对查询来查找capacity选择，因为我们不能再使用#capacity了:
var capacity = $(product).closest('div').find('select[name="capacity"]')[0];
function appendOptionLast(elSel, num){
var elOptNew = document.createElement('option');
elOptNew.text = num;
elOptNew.value = num;
try {
elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
}
catch(ex) {
elSel.add(elOptNew); // IE only
}
}
function removeAllOptions(selectID){
var elSel = document.getElementById(selectID);
elSel.options.length = 0
if (elSel.length > 0){
elSel.remove(0);
}
}
function addAllOptions(elSel, values){
var arrayLength = values.length;
for (var i = 0; i < arrayLength; i++) {
appendOptionLast(elSel,values[i]);
}
}
function setOptions(product){
var capacity = $(product).closest('div').find('select[name="capacity"]')[0];
// removeAllOptions('capacity');
capacity.options.length = 0
var selIndex = product.selectedIndex;
if(selIndex == 1)
addAllOptions(capacity, ["2 lbs","3 lbs", "5 lbs", "10 lbs", "15 lbs", "20 lbs", "50 lbs", "100 lbs", "150 lbs", "200 lbs"]);
else if(selIndex == 2){
addAllOptions(capacity, ["3 lbs", "5 lbs", "10 lbs", "15 lbs", "20 lbs", "50 lbs"]);
}
else if(selIndex == 3){
addAllOptions(capacity, ["10 lbs", "15 lbs", "20 lbs"]);
}
else if(selIndex == 4){
addAllOptions(capacity, ["10 lbs", "20 lbs"]);
}
else if(selIndex == 5){
addAllOptions(capacity, ["3 lbs", "5 lbs", "10 lbs", "15 lbs", "20 lbs", "50 lbs"]);
}
else if(selIndex == 6){
addAllOptions(capacity, ["3 lbs", "5 lbs", "10 lbs", "15 lbs", "20 lbs", "50 lbs"]);
}
else if(selIndex == 7){
addAllOptions(capacity, ["3 lbs", "5 lbs", "10 lbs", "15 lbs", "20 lbs", "50 lbs"]);
}
else if(selIndex == 8){
addAllOptions(capacity, ["10 lbs", "15 lbs", "20 lbs", "25 lbs", "50 lbs", "100 lbs", "200 lbs"]);
}
else if(selIndex == 9){
addAllOptions(capacity, ["20 lbs", "25 lbs", "50 lbs"]);
}
else if(selIndex == 10){
addAllOptions(capacity, ["5 lbs", "10 lbs", "15 lbs", "50 lbs"]);
}
else{
addAllOptions(capacity, ["--"]);
}
}
////////////////////////////////
$(document).ready(function() {
$('#btnAdd').click(function() {
var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
var newNum = new Number(num + 1); // the numeric ID of the new input field being added
// create the new element via clone(), and manipulate it's ID using newNum value
var newElem = $('#input' + num).clone(true, true).attr('id', 'input' + newNum);
// manipulate the name/id values of the input inside the new element
newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
// clear the options of the clone.
setOptions( $(newElem).find('select[name="product"]') );
// insert the new element after the last "duplicatable" input field
$('#input' + num).after(newElem);
// enable the "remove" button
$('#btnDel').removeAttr('disabled');
// business rule: you can only add 5 names
if (newNum == 5)
$('#btnAdd').attr('disabled','disabled');
});
$('#btnDel').click(function() {
var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
$('#input' + num).remove(); // remove the last element
// enable the "add" button
$('#btnAdd').removeAttr('disabled');
// if only one element remains, disable the "remove" button
if (num-1 == 1)
$('#btnDel').attr('disabled','disabled');
});
$('#btnDel').attr('disabled','disabled');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" action="orderInfoReceiver.php">
<fieldset>
<br>
<legend>Product Information</legend>
<div id="input1" style="margin-bottom:4px;" class="clonedInput">
Item Name:
<br>
<select name="product" onchange="setOptions(this)">
<option>Please Select an Item
<option>Dry Chemical
<option>HCFC 123 (Manual)
<option>HCFC 123 (Therman)
<option>HCFC 123 (Ceiling)
<option>HCFC 236 fa (Manual)
<option>HCFC 236 fa (Therman)
<option>HCFC 236 fa (Ceiling)
<option>AFFF (Steel Cylinder)
<option>AFFF (Stainless Cylinder)
<option>CO2 (Carbon Dioxide)
</select>
<br>
Capacity:
<br>
<select name="capacity">
<option> --
</select>
<input type="radio" name="type" value="New">New <input type="radio" name="type" value="Refill">Refill
<br>
<br>
Quantity:
<br>
<input type="number" min="0" name="quantity">
<br>
<br>
<br>
</div>
<input type="button" id="btnAdd" value="+"> <input type="button" id="btnDel" value="-">
</fieldset>
<center><input type="submit" value="Submit"></center>
</form>相关文章：
- 将jQuery事件应用于所有类元素
- React应用程序:道具在下一个事件后更新
- 如何在Win8Metro应用程序的Javascript代码中捕获自己的C#事件
- 鼠标事件在OpenLaszlo应用程序中不起作用
- 在将绑定应用于控制器之后，是否会发出Angular$scope事件
- Joint JS-如何在shapes.devs上应用事件
- jQuery:如何在没有for循环的情况下将事件处理程序应用于$('#text'+'任意整数&#
- 如何使用javascript检查事件是否应用于元素
- Windows 8 HTML5 JavaScript 应用程序中向左滑动的事件名称是什么
- 捕获在Windows应用程序中启动其他应用程序的用户事件
- Chrome 打包应用程序 - 在后台/事件页面中使用 AngularJS
- 事件侦听器，用于完全关闭后重新启动的应用程序
- 在 Web 应用中处理事件跟踪的最佳(高性能）方法
- 如何在 js 中捕获 win8 Metro 应用的可见性更改/应用后台事件
- 尝试在单个类 Jquery 或 js 上应用事件
- 在 Angular 指令中，如何在删除事件后重新应用事件侦听器
- 如何在克隆元素上应用事件
- 如何在JQuery数据表的每行中添加多个按钮以及如何在它们上应用事件
- 在Jquery中应用事件到动态添加表单时遇到了一些问题
- 仅对父级应用事件
