我有这个简单的 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");
};
最佳答案
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!');
}
});
关于javascript - jquery .html() append 后绑定(bind)不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24141978/