在元素加载上调用javascript函数

Question

所以我在我的项目中使用ckEditor实现，我想为其中一个对话框提供自动完成功能。我通过在特定输入字段上调用javascript函数来实现自动完成功能。但是，我不完全确定如何获取特定的输入元素，因为它只在我点击ckeditor中的按钮后出现，因此在文档加载时无法获得。

无论如何在加载特定的div /元素时触发javascript函数？我正在尝试使用Jquery的$().load函数，但它似乎没有被触发。这是一个简短的例子

$(".cke_reset_all cke_1 cke_editor_documentBody_dialog").on("load",function(){
console.log("Successful firing")

//some code here
});

我在控制台中没有看到任何文字，但是出现了具有该班级名称的div。

每次包含输入的对话框加载时，都会创建以下div

<div class="cke_reset_all cke_1 cke_editor_documentBody_dialog " lang="en" aria-labelledby="cke_dialog_title_113" role="dialog" dir="ltr">

因此我尝试在完成此div上的加载后运行我的autoComplete脚本，因为我想要的输入字段嵌套在其中。有什么想法吗？

Answer 1

jQuery中的load方法是一种AJAX简写方法，所以它不是你在此之后所做的。

如果要绑定到load事件，则需要使用on方法（或在早期版本的jQuery中绑定）。

详细信息：http://api.jquery.com/on/

Answer 2

将On方法绑定到父div，然后查找id / class并执行逻辑/调用函数。

 $(function () {

    $('#parentDiv').on('click' ,'yourselectorhere',  function() {

          console.log('working');

        });

   });

Answer 3

load事件仅适用于某些元素，例如正文，iframe，img，输入，脚本。

在您的情况下，要检测页面中是否存在输入元素，您可能必须依赖于使用setTimeout或setInterval循环进行轮询。在循环中，代码将如下所示：

var inputs=$("div.cke_editor_documentBody_dialog input");
if (inputs.length==1) // do something

请注意，您在问题中编写选择器的方式不正确。