动态使用js将div添加到html

Question

我正在尝试使用按钮点击添加html <script type="text/x-handlebars" data-template-name="plan"> <table class="table table-bordered"> <thead> <tr> <th>Truck Number</th> <th>Driver Name</th> <th>Trip 1</th> <th>Trip 2</th> </tr> </thead> <tbody> {{#each truck in model}} <tr> <td>{{truck.truckNumber}}</td> <td>{{truck.driverName}}</td> <td>{{render "plan.trip" truck.shipments trip=1}}</td> <td>{{render "plan.trip" truck.shipments trip=2}}</td> </tr> {{/each}} </tbody> </table> </script> <script type="text/x-handlebars" data-template-name="plan/trip"> <ul> {{#each shipment in tripShipment}} <li>{{shipment.routeCode}}</li> {{/each}} </ul> </script>。我的表单如下所示： 在Trp.PlanTripController = Ember.ArrayController.extend({ trip: '', tripShipment: function() { return this.filterBy('trip', this.get('trip')); }.property('@each.trip') });按钮上点击它添加一行（divs( with textfields)和add size）和Price按钮点击我想添加size的新区域，{{1} }和one add More item等等。 HTML代码是：

name

我的js代码是：

price

但是这段代码第一次添加。我想添加多次添加更多项目按钮。另外还要添加更多尺寸按钮想要添加价格和尺寸字段。

Answer 1

问题是您正在使用html()函数来替换整个html内容，在您遇到的情况下，每次单击按钮时都需要append() HTML。

变化：

 jQuery('.moreitems').html(fld);

要：

 jQuery('.moreitems').append(fld);

Answer 2

嗨，因为我知道可能问题在于附加使用.html（）方法。

这里给出了这两个方法参考链接的区别

http://www.slideshare.net/umarali1981/jqueryappend-vs-jqueryhtml

原因.html（）会覆盖DIV的内容。而.append（）将添加到DIV的内容。所以使用这个和另一件事来通知是你应该绑定'click'事件，尽管使用唯一的'click'方法，如。

$("#addmoreitems").unbind('click').bind('click',function () {
    
      // write your code here

});