Kendo ui：无法将文本值和按钮单击事件绑定到动态创建的 HTML 内容的 viewModel答案

【问题标题】：Kendo ui: Cannot bind text value and button click event to viewModel for dynamically created HTML contentKendo ui：无法将文本值和按钮单击事件绑定到动态创建的 HTML 内容的 viewModel
【发布时间】：2017-08-09 06:47:48
【问题描述】：

我正在使用Kendo MVVM，并使用data attribute 将文本字段值和按钮单击事件绑定到viewModel。

我可以成功绑定文本框的默认值和页面上最初呈现的按钮的点击事件。

但是当我动态生成文本框和按钮时，我无法将值和点击事件绑定到viewModel。

这是我的工作DEMO。以下是我的代码：

JS：

var viewModel = kendo.observable({
    textValue: 1,
    buttonClick: function(e) {
        alert("button click");
    },
  generateDynamicContent: function() {
    var html = '<input data-bind="value: dynamicTextValue" name="dynamicTextValue"/><input type="button" value="Dynamic Button" data-bind="click: dynamicButtonClick"/>';

        $('#dynamicContent').append(html);

  },
    dynamicTextValue: 2,
    dynamicButtonClick: function(e) {
        alert("dynamic button click");
    },
});
kendo.bind($("#example"), viewModel);

HTML：

<div id="example">
<input data-bind="value: textValue" name="textValue"/>
<input type="button" value="Button" data-bind="click: buttonClick"/>

<br />
<input type="button" value="Generate Dynamic Content" data-bind="click: generateDynamicContent"/>

<br/>
<div id="dynamicContent">
</div>

</div>

【问题讨论】：

标签： jquery data-binding kendo-ui dynamic-binding kendo-mvvm

【解决方案1】：

试试这个代码

在附加 html 后添加kendo.bind($("#example"), viewModel);

var viewModel = kendo.observable({
    textValue: 1,
    buttonClick: function(e) {
        alert("button click");
    },
  generateDynamicContent: function(e) {
    var html = '<input data-bind="value: dynamicTextValue" name="dynamicTextValue"/><input type="button" value="Dynamic Buttondddd" data-bind="click: dynamicButtonClick"/>';

    $('#example').append(html);
    //--------THIS LINE IS IMPORTANT
    kendo.bind($("#example"), viewModel);
  },
    dynamicTextValue: 2,
    dynamicButtonClick: function(e) {
        alert("dynamic button click");
    },
});

kendo.bind($("#example"), viewModel);

DEMO

【讨论】：

很高兴为您提供帮助:)