On Jsfiddle：http://jsfiddle.net/jhzux/
我在这个简单的脚本中浪费了很多时间。我想要做的是在jQuery中克隆表单然后让它们正常工作。
首先，当我在JsFiddle上运行此代码时，它不起作用，但在我的浏览器中它确实...奇怪... -.-
其次$(this).next(".persianaops").slideToggle(300);部分甚至不起作用，只有.persianaver部分出现才会发生
当persianaver部分出现单选按钮并不总是有效时，在第一个单元格中它可以正常工作但后来在其他克隆中，无线电的行为就像每个单选按钮属于同一组一样，所以它只能被应用两次：在第一部分而不是在一个克隆中..（我希望你能在Js小提琴中看到这个，因为我的解释有点令人困惑......）
那么有没有更好的方法来使用带有工作单选按钮的JQ克隆表并修复.persianaops部分？
HTML：
<ul id="listing" style="list-style:none;">
<li>
<table class="pedido">
<tr>
<td><select name="product[]">
<option value="0">
Perfil:
</option>
<option value=
"68mm 5 Cámaras AD rendszer egyenes szárny, ütköző tömítéssel">
68mm 5 Cámaras 7001AD, con dos juntas
</option>
<option value=
"68mm 7 K AD rendszer íves szárny, ütköző tömítéssel">
68mm 7 Cámaras 7001AD con dos juntas
</option>
<option value=
"80 mm 6 K Tok + 7 K íves szárny AD rendszer, ütköző tömítéssel">
80 mm Marco 6 Cámaras + Hoja de 7 Cámaras 7001AD con
dos juntas
</option>
<option value=
"68mm 7 K MD rendszer ütköző és középtömítéses, íves szárny">
68mm 7 Cámaras 7001MD con tres juntas
</option>
<option value=
"80 mm 8 K MD rendszer ütköző és középtömítéses, íves szárny">
80 mm 8 Cámaras 7001MD con tres juntas
</option>
</select></td>
</tr>
<tr>
<td><input class="comment" name="h[]" value="Horizontal"> x
<input class="comment" name="v[]" value="Vertical"> uds:
<input name="uds[]" style="width:60px;"></td>
</tr>
<tr>
<td>
<select>
<option>
Color
</option>
</select> Persiana <input class="persiana" name=
"persiana[]" type="checkbox">
<div class="persianaver" style=
"float:right; display:none">
Con motor<input name="f[]" type="radio" value=
"auto"> Manual<input name="f[]" type="radio" value=
"manual">
</div>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td style="width:435px;">
<div class="persianaops" style=
"float:right; display:none">
IMPORTANTE: En caso de haber seleccionado la opción
persiana usted tiene que especificar el tamaño de
la tapa del cajón (Lugar donde se sitúa la caja de
persiana) Puede especificarlo en el campo
comentario <a href="images/demo.jpg" id="pregunta"
name="pregunta"><img alt="pregunta" height="15"
src="images/ask.jpg" width="15"></a>
</div>
</td>
</tr>
<tr>
<td>
<textarea class="comment" cols="59" name="comment[]" rows=
"5">Comentario</textarea></td>
</tr>
</table>
</li>
</ul><button id="clonar" name="colnar">Cloneme</button><br>
<br>
<h3>Datos personales:</h3><br>
<table>
<tr>
<td>Nombre y apellido:</td>
<td><input name="name" type="text"></td>
</tr>
<tr>
<td>Email:</td>
<td><input name="mail" type="text"></td>
</tr>
<tr>
<td>Teléfono:</td>
<td><input name="telefono" type="text"></td>
</tr>
</table>
JQ
$(document).ready(function() {
var $orig = $(".pedido").clone();
$("#clonar").live('click', function(e) {
e.preventDefault();
$("#listing").append($orig.clone());
$(".persiana").click(function() {
$(this).next(".persianaver").slideToggle(300);
$(this).next(".persianaops").slideToggle(300);
});
$(".comment").focus(function() {
if (this.value === this.defaultValue) {
this.value = '';
}
}).blur(function() {
if (this.value === '') {
this.value = this.defaultValue;
}
});
});
});
答案 0 :(得分：0)
至于它不适用于JsFiddle;它可能不起作用，因为你已经设置使用MooTools而不是jQuery。
克隆逻辑;它似乎应该工作;虽然我觉得奇怪的是你在“#clonar”点击事件后“克隆”变量，而不是使用变量来执行克隆事件并检索新鲜的内容。
我会改为：
$(document).ready(function()
{
var $orig = $(".pedido").clone();
$("#clonar").live('click' , function(e){
e.preventDefault();
$("#listing").append($orig);
// or the non variable instance:
// $("#listing").append( $("#pedido").clone(); )
});
});
答案 1 :(得分：0)
我为你修理了你的小提琴：http://jsfiddle.net/8v6CP/1/。
您错过了一些结尾})，而您的HTML错过了</tr>。我建议你缩进你的代码以避免这种问题。
关于".persiana"复选框，您可以在click事件处理程序中附加"#clonar"事件。您应该使用live：
$(document).ready(function(){
var $orig = $(".pedido").clone();
$(".persiana").live("click", function () {
$(this).next(".persianaver").slideToggle(300);
$(this).next(".persianaops").slideToggle(300);
});
$("#clonar").live('click', function (e) {
e.preventDefault();
$("#listing").append($orig.clone());
$(".comment")
.focus(function() {
if (this.value === this.defaultValue) {
this.value = '';
}
})
.blur(function() {
if (this.value === '') {
this.value = this.defaultValue;
}
});
});
});
答案 2 :(得分：0)
我会完全重组这个。见例子。通过在click语句中添加live个事件，您将成为双重绑定事件。
我在这里使用on代替。我监控身体水平，但你应该将它收紧到表格容器或表格以提高性能。只需使用on声明您的事件处理程序。
然后克隆克隆只有一行。您不必阻止按钮上的默认值，因为默认情况下不会执行任何操作。
单选按钮被克隆，因此它们共享相同的名称。这意味着一次只能激活一个单选按钮。我添加了一些代码来重命名它们。
$(document).ready(function() {
var $orig = $(".pedido").clone();
var counter = 0;
$("body").on('click', '.persiana', function() {
$(this).next(".persianaver").slideToggle(300);
$(this).next(".persianaops").slideToggle(300);
});
$("body").on('focus', '.comment', function() {
if (this.value === this.defaultValue) {
this.value = '';
}
}).on('blur', '.comment', function() {
if (this.value === '') {
this.value = this.defaultValue;
}
});
$("#clonar").click(function(e) {
//have to change radio button names to be unique
counter++;
$orig.find(':radio').each( function() {
$(this).prop('name', $(this).prop('name') + counter);
});
//append clone
$("#listing").append($orig.clone());
});
});