0

It works on a static page, but I could not run it on a dynamic page. I add by clicking from the input box and they all have the data-id attribute. I need to capture it with data-id and write it to another element.

My Code:

jQuery(document).ready(function() {
    rename_module_header()
    jQuery('#page-template [data-id]').on('input', function (e) {

    // This place doesn't work

        rename_module_header()
    })
})

function rename_module_header() {
    jQuery('#page-template [data-id]').each(function () {
        if (jQuery(this).attr('data-id') == 'title') {
            var title = jQuery(this).val()
            var module = jQuery(this).parents('.module')
            if (title != '') {
                var module_title = jQuery(module).find('.the-module-title')
                jQuery(module_title).text(title)
            } else {
                var title = jQuery(module).find('[data-title]').attr('data-title')
                jQuery(module).find('.the-module-title').text(title)
            }
        }
    })
}
owuzan
  • 53
  • 1
  • 1
  • 7
  • Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – matthias_h May 26 '20 at 11:39

1 Answers1

0

Modify code as follows:

jQuery(document).ready(function() {
    rename_module_header();
    jQuery('body').on('input', '#page-template [data-id]', function(){
        rename_module_header();
    });
});
Prashant
  • 151
  • 1
  • 11