Jquery 将绑定应用于动态生成的html

我正在创建一个应用程序来管理一些列表项。应用程序有一个包含可用列表项的菜单，用户可以选择一些要添加的列表项。所选列表项显示在表上，关键是每个ListItem都有一个类别，并且每个ListItem都必须显示在同一类别下

这是添加新ListItem的方法：

self.addListItem = function () {
                let $itemsTable = $('#itemsTable');


                if (self.wineList.listItemModelsByCat.hasOwnProperty(this.category.title())) {
                    // the category is added already, just add the list item

                    self.wineList.listItemModelsByCat[this.category.title()].listItems.push({
                        item: this,
                        columnPrices : self.getColumnPricesModel()
                    })
                } else {


                    self.wineList.listItemModelsByCat[this.category.title()] = {
                        catTitle: ko.observable(this.category.title()),
                        listItems: ko.observableArray([{
                            item: this,
                            columnPrices: self.getColumnPricesModel()
                        }])
                    };

                    self.wineList.listItems.push(this);
                    self.listItems.remove(this);



                    // must create new model for this category
                    // and manage the ui

                    // add the category

                    let categoryMarkup  = '<tr>' +
                        `<td class="text-center list-category"
                                colspan="2" id="category_${this.category.id()}"> ${this.category.title()} </td>` +
                        '</tr>';

                    $itemsTable.find('tbody')
                        .append(categoryMarkup);



                    // add category items

                    let itemMarkup = '<tr class="spacer"> </tr>';

                    itemMarkup += `<tr>
                                    <td data-bind="text: wineList.listItemModelsByCat['${this.category.title()}']
                                            .listItems()
                                            .last()
                                            .item
                                            .title">
                                    </td>
                                  <td>
                                        <ul class="inline-list" data-bind="foreach: wineList.listItemModelsByCat['${this.category.title()}']
                                            .listItems()
                                            .last()
                                            .columnPrices">
                                            <li style="float: right" class="inline-list-item" >
                                                <input type="text" data-bind="textInput: price">
                                            </li>
                                        </ul>
                                  </td>
                                </tr>`;

                    $itemsTable.find('tbody')
                        .append(itemMarkup);


                     ko.applyBindings(self, $itemsTable.find('tbody > tr:last-child')[0])
                //
                }
            };


self.getColumnPricesModel = function() {
                let columnModel = ko.observableArray([]);

                self.wineList.columns().forEach((column) => {
                    let model = { title : ko.observable(column.title()),
                        price : ko.observable('')};

                        columnModel.push(model)
                });

                return columnModel;
            };

            self.updateColumnPricesModel = function() {
                Object.keys(self.wineList.listItemModelsByCat).forEach((key) => {
                    let item = self.wineList.listItemModelsByCat[key];
                    for (let i =0; i < item.listItems().length; i++) {
                        let listItem = item.listItems()[i];
                        listItem.columnPrices = self.getColumnPricesModel()
                    }
                })
            };

self.addListItem=函数（）{
设$itemsTable=$（“#itemsTable”）；
if（self.wineList.listItemModelsByCat.hasOwnProperty（this.category.title（）））{
//类别已添加，只需添加列表项即可
self.wineList.listItemModelsByCat[this.category.title（）]listItems.push({
项目:本,，
columnPrices:self.getColumnPricesModel（）
})
}否则{
self.wineList.listItemModelsByCat[this.category.title（）]={
catTitle:ko.observable（this.category.title（）），
列表项：ko.array([{
项目:本,，
columnPrices:self.getColumnPricesModel（）
}])
};
self.wineList.listItems.push（this）；
self.listItems.remove（此）；
//必须为此类别创建新模型
//并管理用户界面
//添加类别
让categoryMarkup=“”+
`${this.category.title（）}`+
'';
$itemsTable.find（'tbody'）
.附加（类别标记）；
//添加类别项目
让itemMarkup=''；
itemMarkup+=`




`;
$itemsTable.find（'tbody'）
.附加（项目标记）；
ko.applyBindings（self，$itemsTable.find（'tbody>tr:last child'）[0]）
//
}
};
self.getColumnProcesModel=函数（）{
设columnModel=ko.observableArray（[]）；
self.wineList.columns（）.forEach（（列）=>{
让model={title:ko.observable（column.title（）），
价格：ko.可观察（“”）}；
columnModel.push（模型）
});
回归模型；
};
self.updateColumnPricesModel=函数（）{
Object.key（self.wineList.listItemModelsByCat）.forEach（（key）=>{
让item=self.wineList.listItemModelsByCat[key]；
for（设i=0；i

---

问题是数据绑定在新添加的项上不起作用。我遗漏了什么吗？

在我的

更新列价格模型中，问题似乎很简单：

self.updateColumnPricesModel = function() {
                Object.keys(self.wineList.listItemModelsByCat).forEach((key) => {
                    let item = self.wineList.listItemModelsByCat[key];
                    for (let i =0; i < item.listItems().length; i++) {
                        let listItem = item.listItems()[i];
                        listItem.columnPrices = self.getColumnPricesModel()
                    }
                })
            };

self.getColumnPricesModel = function(isNew = true) {
    let columnModel = isNew ? ko.observableArray([]) : [];

    self.theList.selectedColumns().forEach((column) => {
      let model = {
        title: ko.observable(column.title()),
        price: ko.observable('')
      };

      columnModel.push(model)
    });

    return columnModel;
  };

self.updateColumnPricesModel=function（）{
Object.key（self.wineList.listItemModelsByCat）.forEach（（key）=>{
让item=self.wineList.listItemModelsByCat[key]；
for（设i=0；i{
让模型={
标题：ko.observable（column.title（）），
价格：ko.可观察（“”）
};
columnModel.push（模型）
});
回归模型；
};

在每次更新中，我都将columnPrices设置为一个新的
observableArray

listItem.columnPrices=self.getColumnPricesModel（）
我将此更改为

listItem.columnPrices（self.getColumnPricesModel（false））

它成功了。
我将准备一个JSFIDLE，让问题更清楚。最好是现场片段。小提琴或片段肯定会help@JasonSpake如果您有一个项目列表，并且正在使用knockout，那么就不需要在字符串中定义html元素了。您可以在html文件中的knockout
foreach
绑定中编写结构，如果要添加数据，它将显示具有工作绑定的元素。对不起，如果我误解了你的问题。