jquery .html() 附加后绑定不起作用

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);

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

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

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

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

编辑：

按钮事件：

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

Answer 1

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

类似：

$.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!');
    }
});

Answer 2

正如大多数人指出的那样。当您使用追加动态添加 HTML 时，DOM 不会重新评估绑定。因此，您需要：

1. 在 .ajax success 事件处理程序中应用/重新应用您的绑定
2. 在document html onChange 处理程序中应用/重新应用您的绑定
3. 首先将您的 HTML 静态放置，但对所有样式设置为 display:none 的元素使用 类，然后将样式更改为 display:block、display:inline-block、等等。
4. 将上述内容与一些静态 HTML 混合使用，以至少建立 button 和 function 之间的绑定以及使绑定正常工作所需的任何其他内容，但随后动态 .append() 任何其他不依赖于绑定的东西

Answer 3

有时您需要在父页面上创建辅助函数以应用绑定，然后从附加文本中调用该函数。原始页面加载时定义的所有功能都将可用。我以前使用过这种方法，但您必须提前知道需要构建哪些功能。或者您可以将绑定作为后 ajax 进程的一部分。

它使 ajax 加载具有不错的功能

function bindStuff() {
    $(".class1").click(function() {
        // do something with the bind        
    });
}
function ajaxLoad() {
    // Perform ajax load
    // on complete call your bindings
    complete: function() {
        bindStuff();
    }
}

用你的例子：

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