Jquery 克隆和单选按钮 : strange behavior

Question

在 Jsfiddle 上:http://jsfiddle.net/jhzux/

我在这个简单的脚本上浪费了很多时间。我想做的是在 jQuery 中启用克隆表单，然后使它们正常工作。

首先，当我在 JsFiddle 上运行这段代码时，它不起作用，但在我的浏览器中它起作用了……奇怪……-.-

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

当 persianaver 部分出现时，单选按钮并不总是有效，在第一个单元格中它工作正常，但后来在其他克隆中，单选按钮的行为就像每个单选按钮都属于同一组，因此它只能应用两次:在第一部分中，而不是在其中一个克隆中。(我希望你能在 Js fiddle 中看到这一点，因为我的解释有点令人困惑。)

那么有没有更好的方法来使用带有工作单选按钮的 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(); )
        });
});