I have a custom toolbar which inserts a link in kendo editor. I am trying to put a onClick function in that link but when the dynamically inserted link is clicked it says function is not defined. I also tried it by putting a class on that link and have a click function to that class but it does not get hit.
Any help would be much appreciated.
$("toolbarSubmitBtn").("click", function () {
var value = $("toolbarInput").val();
var $html = '<a onClick="myFunction()"> Click to show alert </a>';
//var $html = '<a class="functioncall"> Click to show alert </a>';
var $empty = $("<div>").append($html)
$("#editor").data("kendoEditor").paste($empty.html());
});
Class Call
$(document).on("click", ".functioncall", function () {
alert("function called from class");
});
Function Call
function myFunction() {
alert("function called by click");
}
I believe the issue is that the Kendo Editor puts the body content within an IFRAME and your "myFunction" is not within that IFRAME. Try setting the onClick to
window.parent.myFunction();
$("#toolbarSubmitBtn").on("click", function () {
var $html = '<a href="#" onClick="window.parent.myFunction();" contenteditable="false"> Click to show alert </a>';
$("#editor").data("kendoEditor").paste($html);
});
Optionally, set contenteditable="false" on your inserted link to prevent user editing the link text.
Here is a DEMO