Question

我正在创建一个表单，用户可以在其中添加新的＆＃34;项目＆＃34;和新的＆＃34;类别＆＃34;。在每个项目输入框之后，有一个按钮可以添加另一个输入框。对于每个类别，都有一个输入列表和一个类别名称的输入;类似地，在类别的末尾有一个按钮来添加另一个类别。

我已经使按钮工作，但添加到表单的新按钮不会添加新的输入元素，只有第一个输入元素。到目前为止，我一直在使用此代码的javascript：

var counter = 1;
function addInput(divName){
var newdiv = document.createElement('div');
          newdiv.innerHTML = "<br><div class='form-inline' id='dynamicInput'><label  for='item'>Item #" + (counter + 1) + "</label><input type='item' class='form-control' id='item1' placeholder='Artichoke Hearts'><button type='button' class='btn btn-default btn-lg' onclick='addInput('dynamicInput')'><span class='glyphicon glyphicon-plus'></span> Add</button></div>";
 document.getElementById(divName).appendChild(newdiv);
 counter++;

}

同样的javascript用于该类别，只是不同的函数名称和html。这是一个jsfiddle：http://jsfiddle.net/zpCjR/ （奇怪的是，代码不能在jsfiddle上运行，但在我的浏览器上通过本地机器运行......）??

我试图获取elementByClassName，但这也没有用。

我希望这是有道理的。如果不清楚，请发表评论，并试着用不同的方式解释。我一直在努力解决这个问题。在此先感谢您的帮助！

Answer 1

jsfiddle的整个问题是你必须在左上角的网站No wrap -in <head>中进行设置，这样方法才能正常工作。如果不这样做，方法的名称将在控制台中显示为未定义。我没有更改代码中的任何内容。只需更改No wrap -in <head>部分并完美运行 It Works! http://oi61.tinypic.com/2llzj42.jpg

编辑：

这是新的小提琴： http://jsfiddle.net/zpCjR/1/

我基本上只是用html中的上面一个替换了innerHTML部分并且它有效......

Answer 2

在JSBin上查看此示例：http://jsbin.com/gawazu/2/edit?html,js,output

我知道人们喜欢使用jQuery，但这是一个使用它的好方案。在动态添加要响应事件的内容（例如点击）时，通常最好使用event delegation。这样，当您添加更多元素时，它们将自动设置为执行您的JS以响应您的点击事件。

在下面的示例中，我在.addItem按钮上侦听点击事件。单击这些按钮后，我运行addItem。 addItem将遍历DOM到表单父元素，然后将新项目附加到该元素的父级（在此示例中为body）。

// Use event delegation to listen for clicks on all `.addItem` elements,
// even ones added dynamically later
$(document).on('click', '.addItem', addItem);

var counter = 1;

function addItem() {
  counter++;

  // jQuery will make `this` a reference to the element that triggered the click event (`.addItem` button)
  // Find the `.form-inline` element that is the parent of `.addItem`
  // Select the form's parent element
  var $parent = $(this).closest('.form-inline').parent();

  var html = '<div class="form-inline"><label for="item">Item #' + counter + '</label> <input type="item" placeholder="Artichoke Hearts"> <button type="button" class="addItem">Add</button></div>';

  // Append the new HTML to the form's parent element
  $parent.append(html);
}

Button动态添加子div，并重新创建按钮

2 个答案: