I have a custom meta box as part of my post editor. When the user changes the post title, I want to reflect this change in the content inside the meta box. I have seen plugins like Yoast do this but im not sure how.

I have tried using a jQuery event to do this but even if i wait for document.ready, it doesnt bind itself to the element.

jQuery(".editor-post-title__input").keyup(function(){
    console.log(jQuery(".editor-post-title__input").val());
});

I have a custom meta box as part of my post editor. When the user changes the post title, I want to reflect this change in the content inside the meta box. I have seen plugins like Yoast do this but im not sure how.

I have tried using a jQuery event to do this but even if i wait for document.ready, it doesnt bind itself to the element.

jQuery(".editor-post-title__input").keyup(function(){
    console.log(jQuery(".editor-post-title__input").val());
});

• plugins
• javascript
• metabox
• editor

1 Answer 1

The event listener you have added will only attach to the available .editor-post-title__input elements, and won't attach to any dynamically added elements. You are better to move the listener to the body as follows:

jQuery('body').on('keyup', '.editor-post-title__input', function(event){ 
   console.log(jQuery(this).val());
});

Given the admin area is moving to use more React components, it's a good habit to get into.