2

在 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>

江青

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

3 回答 3

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(); )
        });
});
于 2012-04-04T17:30:04.667 回答
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;
                }
            });
    });
});
于 2012-04-04T17:36:21.600 回答
0

我会完全重组这个。见例子。click通过在live语句中添加事件，您是双重绑定事件。

我在这里on改用。我监控身体水平，但您应该将其收紧到表单容器或表单以提高性能。只需声明您的事件处理程序一次使用on.

然后clone克隆的只有一行。您不必阻止按钮的默认设置，因为默认设置无论如何都不会做任何事情。

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

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());
    });
});​
于 2012-04-04T17:38:03.987 回答