Hello - I have an html file (some.html) that has some controls, one of which is a span (which I would like to render as a kendoMobileButton. I also have a JS file where I get the contents of some.html using an ajax call and append it to the body. For the purpose of this question, I am oversimplifying the code.
some.html:
...
<div id="somediv">
<span id="thisbutton" data-bind="click: click" style="background-color:green;">A Button</span>
</div>
JS:
$.ajax({
url: "html/mobileapp/preflight/some.html",
type: "GET",
success: function(data) {
this.container.append(data);
bindView();
},
context:this,
error : function(xhr, textStatus, errorThrown ) {
},
timeout: 30000
});
In the bindView(), I create a viewModel and bind it to the view, as below:
viewModel = kendo.observable({
locations: this.dataSource.data(),
click: function(e) {
console.log("****click");
}
});
kendo.bind($("#somediv"), viewModel);
$("#thisbutton").kendoMobileButton();
(Note that the above code happens *after* kendoApp has been created (hence the reason I would like to call kendoMobileButton() to render the span as a kendo mobile button:
kendoApp = new kendo.mobile.Application(document.body, { });
What I observe when I run the app on the device is that the span is correctly rendered as a button, *but* the click method doesn't get called consistently. It fires a few times, and then on subsequent clicks, nothing happens - I don't see the console.log("****click") output.
Now if I comment out this line:
//$("#thisbutton").kendoMobileButton();
then the span remains a span (instead of button) but the click event fires correctly everytime I click the span.
Any idea what could be going on?
Thanks,
some.html:
...
<div id="somediv">
<span id="thisbutton" data-bind="click: click" style="background-color:green;">A Button</span>
</div>
JS:
$.ajax({
url: "html/mobileapp/preflight/some.html",
type: "GET",
success: function(data) {
this.container.append(data);
bindView();
},
context:this,
error : function(xhr, textStatus, errorThrown ) {
},
timeout: 30000
});
In the bindView(), I create a viewModel and bind it to the view, as below:
viewModel = kendo.observable({
locations: this.dataSource.data(),
click: function(e) {
console.log("****click");
}
});
kendo.bind($("#somediv"), viewModel);
$("#thisbutton").kendoMobileButton();
(Note that the above code happens *after* kendoApp has been created (hence the reason I would like to call kendoMobileButton() to render the span as a kendo mobile button:
kendoApp = new kendo.mobile.Application(document.body, { });
What I observe when I run the app on the device is that the span is correctly rendered as a button, *but* the click method doesn't get called consistently. It fires a few times, and then on subsequent clicks, nothing happens - I don't see the console.log("****click") output.
Now if I comment out this line:
//$("#thisbutton").kendoMobileButton();
then the span remains a span (instead of button) but the click event fires correctly everytime I click the span.
Any idea what could be going on?
Thanks,