向表单添加字段（jQuery）答案

【问题标题】：Adding a field to a form (jQuery)向表单添加字段（jQuery）
【发布时间】：2012-04-18 15:09:52
【问题描述】：

我正在构建一个表单。那里没问题。除了提交按钮之外，我还有另一个按钮，当单击该按钮时，会在表单中添加另一个字段。我正在尝试使用 javascript (jquery) 来执行此操作。不用说我没有运气。我尝试了许多不同的方法，这是我放弃的方法：

$("#snew").click(function () {  
var container = $("#sblc").add("div");
var content = "<select> <option>Domestic</option><option>Tiger</option><option>Peeled                  Raw</option><option>Cooked Peeled Tail On<option></select><select> <option>1 lbs</option>   <option>2 lbs</option><option>3 lbs</option></select>";

                $(container).attr("class", "opt");
                $(container).append(content); 
                $(container).appendTo("#sblc"); 

            })

下面是对应的 HTML： http://pastie.org/3729304 （我不知道如何让 HTML 在这里正确显示。抱歉链接。）

每当我尝试这个时，我最终要么得到一个完全白页，要么什么都没有发生。任何帮助将不胜感激。

【问题讨论】：

你的问题可能在这里var container = $("#sblc").add("div"); 然后你在jQuery 中包装container 两次，不需要这样做。

标签： javascript jquery forms append

【解决方案1】：

我认为你需要这样做：

var container = $("<div>"); // notice the `<` and `>`

这样，您创建新的DIV 容器和append 稍后（您已经这样做了）

【讨论】：

我试过了，此时它删除了表单中的所有其他内容。这是一个开始。它实际上在做某事......

【解决方案2】：

只调用一次 append 怎么样：

    $("#sblc").append("<div class=\"opt\"><select><option>Domestic</option><option>Tiger</option><option>Peeled                  Raw</option><option>Cooked Peeled Tail On<option></select><select> <option>1 lbs</option><option>2 lbs</option><option>3 lbs</option></select></div>");

【讨论】：

【解决方案3】：

您的附加方式有误。

http://jsfiddle.net/NYnYw/

【讨论】：

【解决方案4】：

试试下面的方法，

DEMO

$("#snew").click(function() {
    var container = $("<div />");
    var content = "<select> <option>Domestic</option><option>Tiger</option><option>Peeled                  Raw</option><option>Cooked Peeled Tail On<option></select><select> <option>1 lbs</option>   <option>2 lbs</option><option>3 lbs</option></select>";

    $(container)
        .attr("class", "opt") //add class to the div container
        .append(content)      //append select to the div
        .appendTo("#sblc");   //append div to #sblc

});

【讨论】：

我明白了。当它只需要一个引用时，我不断地引用容器，并且根据我的第一行的逻辑，它已经附加到初始 div （无论如何都不起作用）。感谢您为我解决这个问题！

【解决方案5】：

这将适用于您提供的代码：

$("#snew").click(function () {
    var container = $("#sblc");
    var content = "<div><select> <option>Domestic</option><option>Tiger</option><option>Peeled                  Raw</option><option>Cooked Peeled Tail On<option></select><select> <option>1 lbs</option>   <option>2 lbs</option><option>3 lbs</option></select></div>";

    $(container).attr("class", "opt");
    $(container).append(content);
})

【讨论】：

【解决方案6】：

您的逻辑似乎很奇怪...您首先将container 声明为$("#sblc").add("div")，它指的是一个包含#sblc 和尽可能多的div 的对象集合。这真的是你想要做的吗？
然后，您将 container 双重包装在 jQuery 对象中，这是不必要的。
让我觉得不寻常的部分是$(container).appendTo("#sblc")。您将双重包装的container 或#slbc + divs 附加到#slbc??不明白...
你可以试试这样的：

$("#snew").click(function () {

    var $container =  # ('#slbc'),
        materials = ['Domestic', 'Tiger', 'Peeled Raw', 'Cooked Peeled Tail On'],
        values = ['1 lbs', '2 lbs', '3 lbs'],
        html = '<select><option>' + materials.join('</option><option>') + '</option></select>' +
            '<select><option>' + values.join('</option><option>') + '</option></select>';

    $container.append(html).addClass('opt');

});

【讨论】：