CODEWITHSUNDEEP
javascriptjquery
Shrivar R
Shrivar R

Reputation: 141

Calling a javascript function on element load

So I am working with a ckEditor implementation in my project, and I want to provide autocomplete functionality for one of its dialog boxes. I implement the autocomplete functionality by calling a javascript function on a specific input field. However, I am not completely sure on how to obtain the specific input element, as it only appears after I hit a button in ckeditor, so it is no obtainable on document load.

Is there anyway to fire a javascript function upon the loading of a specific div/element? I am trying to use Jquery's $().load function, but it does not seem to be firing. Here is a short example

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

//some code here
});

I am not seeing any text in my console, but div with that class name is appearing.

Everytime the dialog box containing the input loads , the following div is created 

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

so I am trying to run my autoComplete script after the loading on this div is done, as the input field I want is nested within it. Any ideas?

Upvotes: 1

Views: 1267

Answers (3)

Christophe
Christophe

Reputation: 28174

The load event only applies to some elements, like body, iframe, img, input, script.

In your case, to detect if the input element is present in the page you'll probably have to rely on polling with a setTimeout or setInterval loop. Within the loop, the code will look like:

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

Note that the way you wrote the selector in your question is incorrect.

Upvotes: 0

jorblume
jorblume

Reputation: 607

Bind the On method to the parent div, then look for the id/class and carry out your logic/call a function.

 $(function () {

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

          console.log('working');

        });

   });

Upvotes: 0

PulseLab
PulseLab

Reputation: 1579

The load method in jQuery is an AJAX shorthand method, so it's not what you're after here.

If you want to bind to the load event, you need to use the on method (or bind in earlier versions of jQuery).

Details here: http://api.jquery.com/on/

Upvotes: 1

Related Questions