页面加载后动态添加新的div

debugcn 发表于 Dev

用户3378165

在我看来，我可以选择添加用户，每个用户user都是一个带有几个字段的 div：

<div>
    <input data-bind="value: name" />
    <input data-bind="value: position" />
    <input data-bind="value: email" /></div>
    <button data-bind="click: function(){ $root.addUser()}">SAVE</button>
</div>

此 div 是通过单击按钮添加的，并且在页面加载时不存在。

当我尝试通过单击“保存”按钮来保存新用户时，它不起作用，没有任何反应，它只是忽略了我的单击。

所以我的问题是 - 如何data-bind在动态生成的元素上进行淘汰赛？

我在网上阅读了一些帖子，但找不到解决方案，任何帮助将不胜感激。

Users.js 脚本：

var User = function (data) {
    this.name= ko.observable(data.name);
    this.position= ko.observable(data.position);
    this.email= ko.observable(data.email);
}
self.users = ko.observableArray([]);
self.addUser= function () {
  console.log("test");   
}

这是添加 div 的代码Users.ui.js：

$('body').on('click', '.add', function () {
        var strClientSecHtml = "<div class=\"sec\"><div class=\"secIn\">\n...
        $(strClientSecHtml).insertBefore($(this).closest('.sec'));
        showPrimaryLbl();
})

杰森说话

如果您创建动态内容以便拥有元素引用，则可以将一组新绑定应用于动态内容。

$('body').on('click', '.add', function () {
        var strClientSecElem = $('<div class=\"sec\"><div class=\"secIn\">\n...');
        $(this).closest('.sec').before(strClientSecElem);
        ko.applyBindings(new User({}), strClientSecElem.get(0)); //get the native element from jQelement
        showPrimaryLbl();
})

话虽如此，通过淘汰赛，您通常希望修改您的javascript对象，并将 DOM 修改留给库，而不是动态插入 html。您可以将一个新的 User 对象推送到 users 数组，foreach:users绑定将负责在 DOM 中创建新元素。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。