Kendo 编辑器动态 Link onClick 功能不工作

Question

我有一个自定义工具栏，它在 kendo 编辑器中插入了一个 link。我试图在 link 中放置一个 onClick 函数，但是当单击动态插入的 link 时，它说函数未定义。我也试过在 link 上放一个 class 并且对 class 有一个点击功能，但它没有被击中。

如有任何帮助，我们将不胜感激。

$("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 通话

$(document).on("click", ".functioncall", function () {
    alert("function called from class");
});

函数调用

function myFunction() {
    alert("function called by click");
}

Answer 1

我认为问题在于 Kendo 编辑器将正文内容放在 IFRAME 中，而您的“myFunction”不在该 IFRAME 中。尝试将 onClick 设置为

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);
});

可选地，在插入的 link 上设置 contenteditable="false" 以防止用户编辑 link 文本。

这是一个DEMO

Kendo 编辑器动态 Link onClick 功能不工作

Kendo Editor Dynamic Link onClick Function Not Working

javascript

kendo-ui

kendo-editor