javascript - jquery .html() append 后绑定(bind)不起作用

Question

我有这个简单的 div:

<div id="mainContent">

</div>

它是空的。现在我试图将此 HTML 附加到上面的 div:

<div id="mainContent">
   <label>Project Name</label>
   <input type="text" id="projectName" data-bind="value: projectName"/> 
   <label>Tracker Name</label>
   <input type="text" id="trackerName" data-bind="value: trackerName"/>
</div>
<button type="submit" data-bind="click: submitNewProject">Submit</button>

通过使用:

                       $.ajax({
                             type : 'POST',
                             url : 'newTracker.php',
                             dataType : 'html',
                             success : function(data){
                                     $("#mainContent").html(data);
                             },
                             error : function(XMLHttpRequest, textStatus, errorThrown) {
                                     alert('Something is wrong!');
                             }
                     });

data 是我尝试分配的 HTML:$("#mainContent").html(data);

乍一看一切都很漂亮，但有一个问题 - 绑定(bind)不起作用。

我的意思是，在新分配的 HTML 中，我有一个应该调用 viewmodel 函数的按钮，但它没有...

但是如果我将代码直接放在 div 中，绑定(bind)就会像魅力一样工作。

当我在 div 中分配新的 HTML 代码时，为什么我的出价不起作用？我知道我在这里遗漏了一些非常小和基本的东西，但我无法发现它。

编辑:

按钮事件:

 submitNewProject = function(){
                            console.log("submit new project");
                        };

Answer 1

Knockout 无法跟踪新创建的元素，如果您的 DOM 使用 Ajax 方法更改，您必须显式地将 View 模型绑定(bind)到新创建的元素。

类似于:

$.ajax({
    type: 'POST',
    url: 'newTracker.php',
    dataType: 'html',
    success: function (data) {
        var $mainContent = $("#mainContent");
        $mainContent.html(data);

        var existingViewModel = ko.dataFor(document.body);
        ko.applyBindings(existingViewModel, $mainContent.get(0));
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        alert('Something is wrong!');
    }
});