Question

我正在构建一个表单。没问题。除了提交按钮，我还有另一个按钮，当单击该按钮时，会向表单添加另一个字段。我试图使用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。抱歉链接。）

每当我尝试这个时，我最终会得到一个完全白页，或者根本没有任何事情发生。任何帮助将不胜感激。

Answer 1

我认为你需要这样做：

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

这样，您可以稍后创建新的DIV容器和append（您已经完成此操作）

Answer 2

如果只是简单地调用追加一次：

    $("#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>");

Answer 3

您的追加方式有误。

http://jsfiddle.net/NYnYw/

Answer 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

});

Answer 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);
})

Answer 6

你的逻辑看起来很奇怪......你首先将container声明为$("#sblc").add("div")，它指的是包含#sblc和div的jQuery对象集合。可以匹配。这真的是你想要做的吗？然后，在jQuery对象中双重包裹container，这是不必要的让我感到异常的部分是$(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');

});

向表单添加字段（jQuery）

6 个答案: