Independent JS/Jquery?

orkneywill

Hi all,

Can anyone please tell me why the following doesn't work. It's placed in the head of my page after all of the editor JS is included.

<script>
$( "#DTE_Field_item_no" ).focus(function() {
  alert( "Handler for .focus() called." );
});
</script>

I also tried including it at the bottom of the HTML, before the closing </body>, but when I inspected in Firebug I noticed the code is still appearing before "DTED_Lightbox_Wrapper" when I press the "New" button.

The id came straight out of Firefox so I know it's correct :) Many thanks
Will

allan

Probably because there is no #DTE_Field_item_no element on the page when that code runs (and therefore the event listener can't be attached). To check you can use console.log( $('#DTE_Field_item_no').length ); at the point when that code is run. I expect it to show 0.

Editor will only insert the form into the document when it is needed for the display.

To get elements which are not shown in the DOM I would suggest using the API - specifically field().input(). For example:

editor.field( 'item_no' ).input().focus( function () {
  ...
} );

Allan