我正在使用Kendo MVVM
,并使用数据属性
将文本字段值和按钮单击事件绑定(bind)到viewModel
。
我可以成功绑定(bind)最初在页面上呈现的文本框的默认值和按钮的单击事件。
但是当我动态生成文本框和按钮时,我无法将值和单击事件绑定(bind)到 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>
最佳答案
尝试此代码
在附加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);
关于jquery - 剑道用户界面 : Cannot bind text value and button click event to viewModel for dynamically created HTML content,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45583433/