绑定在jquery .html（）附加后无效 [英] Bindings are not working after jquery .html() append

问题描述

我有这个简单的div：

 < div id =mainContent> 
 
< / div> 
  

，它是空的。现在我试图将这个 HTML 追加到上面的div中：

 < div id =mainContent> 
< label>项目名称< / label> 
< input type =textid =projectNamedata-bind =value：projectName/> 
< label> Tracker Name< / label> 
< input type =textid =trackerNamedata-bind =value：trackerName/> 
< / div> 
< button type =submitdata-bind =click：submitNewProject> Submit< / button> 
  

通过使用：

  $ .ajax（{
类型：'POST'，
 url：'newTracker.php'，
 dataType：'html'，
成功：函数（data）{
 $（＃mainContent）.html（data）; 
}，
 error：function（XMLHttpRequest，textStatus，errorThrown）{
 alert（'Something错误！'）; 
} 
}）; 
  

data 是 HTML 我试图通过以下方式分配： $（＃mainContent）。html（data）;

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

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

BUT如果我将代码直接放在div的内部，那么绑定就像一个魅力一样。

为什么当我分配新的<$ c $时，我的出价不起作用c> HTML 代码里面的代码？我知道我在这里错过了一些非常小而基本的东西，但我无法发现它。

编辑：

按钮事件：

  submitNewProject = function（）{
 console.log（submit new project ）; 
}; 
  

解决方案

如果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！'）; 
} 
}）; 
  

I have this simple div:

<div id="mainContent">

</div>

and it's empty. Now I'm trying to append this HTML to the above 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>

By using:

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

Where data is the HTML I'm trying to assign by: $("#mainContent").html(data);

At first look everything looks pretty, but there is a problem - the bindings are not working.

What I mean is that in the newly assigned HTML I have a button supposed to call a viewmodel function, but it does not...

BUT if I place the code directly inside of the div the bindings are working like a charm.

Why my bidings are not working when I'm assigning a new HTML code inside of the div? I know that I'm missing something really small and basic here, but I can't spot it.

EDIT:

Button event:

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

解决方案

Knockout cannot track newly created elements, if your DOM changed using Ajax methods you'll have to explicitly bind a view-model to the newly created elements.

Something like:

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

这篇关于绑定在jquery .html（）附加后无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！