jQuery的克隆和单选按钮：奇怪的行为

Question

上的jsfiddle：http://jsfiddle.net/jhzux/

我已经浪费了很多时间在这个简单的脚本..我想要做的就是使克隆jQuery的表格，然后让他们正常工作。

在当我运行这段代码上的jsfiddle它不工作，但在我的浏览器它..奇怪的第一名...... -.-

其次$(this).next(".persianaops").slideToggle(300);部分甚至不工作，没有任何反应只。 persianaver部分出现

当persianaver部件出现单选按钮不总是有效时，在第一个单元格中它工作正常，但后来在其他克隆中，收音机表现得像每个单选按钮属于同一组，因此它只能是两次：在第一部分，并在克隆之一..（我希望你可以看到这在Js小提琴因为我的expnatation有点混乱..）

那么有没有更好的方法来克隆带有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; 
      } 
     }); 
    }); 
});​ 

Answer 1

至于它不工作的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();) 
     }); 
}); 

Answer 2

我定你捣鼓你：http://jsfiddle.net/8v6CP/1/。

您错过了一些结局})而您的HTML缺少</tr>。我建议你缩进你的代码以避免这种问题。

关于".persiana"复选框，您可以在"#clonar"事件处理程序中附加click事件。您应该使用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; 
       } 
      }); 
    }); 
}); 

Answer 3

我会完全重构它。看例子。通过在live声明中添加click事件，您是双重约束事件。

这里我用on来代替。我监测身体的水平，但你应该把它收紧到表格容器或表格来提高表现。只需使用on来声明您的事件处理程序。

然后克隆克隆只有一行。您不必防止按钮上的默认设置，因为默认设置不会执行任何操作。

单选按钮被克隆，因此它们共享相同的名称。这意味着一次只能有一个单选按钮处于活动状态。我添加了一些代码来重命名它们。

http://jsfiddle.net/jhzux/3/

$(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()); 
    }); 
});​