Joomla Subform adding row, the selector event is not fired if I change the value of the select element?

Question

I have a subform which is working perfectly itself. If I add a new row (+), I have add the function as mentioned on joomla subform documentation:

jQuery(document).on('subform-row-add', function(event, row){
            jQuery('.timepicker').timepicker();

            // jform_tsch__tsch1__trln / jform_tsch__tsch1__lfld
            var lcID    = 'jform_tsch__' + jQuery(row).data('group') + '__trln';
            var flID    = 'jform_tsch__' + jQuery(row).data('group') + '__lfld';
            var loccode = jQuery('#jform_tsch__' + jQuery(row).data('group') + '__trln').val();

            var init    = false;
            jQuery('#'+ lcID).trigger("liszt:updated");
            console.log('lcID: ' + lcID + ' - data group: ' + jQuery(row).data('group') + ' - loccode: ' + loccode);

            getLocationFields(loccode, flID, init);
        });

So far, this is working perfectly.

But I have also an event selector for event on id and here I have an issue with for the new row if the new row is not first saved:

jQuery('select[id^=jform_tsch__tsch][id$=__trln]').change(function () {
            //jform_tsch__tsch0__trln
            //jform_tsch__tsch1__trln
            var lcid = jQuery(this).attr('id'); //DK, IS
            var target = lcid.split('__');
            //field ID, #
            var flID = target[0]+'__'+target[1] + '__lfld';
            //var fsel = jQuery('#'+subID).val();
            var loccode = jQuery(this).val();
            var init = false;

            getLocationFields(loccode, flID, init);
 });

When an row of the subform is saved, it works perfectly. When I change the select field of

'jform_tsch__tschx__trln'

, then is (geLocationFields) executed.

BUT:
If I add a new row to the subform and I change the select of 'jform_tsch__tsch0__trln', nothing is happening/executed.

If I save the details page incl. the new row of the subform and if I change than the value of the select of 'jform_tsch__tsch0__trln', the event trigger is executed.

So it seems to me that the new row is not added to the DOM. Therefore I have add the line

jQuery('#'+ lcID).trigger("liszt:updated");

But that makes no difference.

Anybody have an idea how to get the new row field in jQuery(document).on('subform-row-add', function(event, row){ working with the event selector, without first having to save the details page?

Do I have to add an event listener with jQuery? (but how?)

Do I have to update the DOM in one or other way?

Answer 1

I ran in to a similar problem earlier this week, mainly due to the use of showon which I required to make the field required if the showon condition was met; something Joomla 3.X cannot do by default, but I believe is resolved in v4. I got it working, after many experiments, by just moving the things around into a function. Basically here's what I'm doing:

$("body").on("subform-row-add", function() {
    myFunc();
}

Then I declare myFunc() to do this:

    function myFunc(event, container)
    {
        container = container || document;

        js(container).find('.yourdropdownelement').on('change liszt:updated', function(change, selected) {
            // do whatever you need to do, then we'll trigger the update on the update; so this function is called recursively.
        });

        js('.yourdropdownelement').trigger('liszt:updated');
    }

    myFunc();

Answer 2

I got a resolution yesterday via another answer on another forum from Mark Dexter, so the credits goes to Mark!

This does the job, but I don't understand how it works. I now have an event selector in an event selector. I was not even aware that this is possible in jQuery.

jQuery(document).on('subform-row-add', function(event, row){
            jQuery('.timepicker').timepicker();


            // jform_tsch__tsch1__lfld

            var lcID    = 'jform_tsch__' + jQuery(row).data('group') + '__trln';
            var flID    = 'jform_tsch__' + jQuery(row).data('group') + '__lfld';
            var loccode = jQuery('#jform_tsch__' + jQuery(row).data('group') + '__trln').val();

            //var loccode = jQuery('#' + lcID).val();
            var init    = false;
           
            jQuery('#'+ lcID + " option:first").attr('selected','selected');

            //jQuery('#'+ lcID).trigger("liszt:updated");
            //console.log('lcID: ' + lcID + ' - data group: ' + jQuery(row).data('group') + ' - loccode: ' + loccode);

            getLocationFields(loccode, flID, init);
            // MODIFICATION: EVENT SELECTOR COPIED AND PUT IN THIS EVENT SELECTOR, 'FUNCTION IN A FUNCTION' or EVENT SELECTOR IN AN EVENT SELECTOR !!!???
            jQuery('select[id^=jform_tsch__tsch][id$=__trln]').bind('change', function () {
                //jQuery('select[id^=jform_tsch__tsch][id$=__trln]').change(function () {

                //jform_tsch__tsch0__trln
                //jform_tsch__tsch1__trln
                var lcid = jQuery(this).attr('id'); //DK, IS
                var target = lcid.split('__');
                //field ID, #
                var flID = target[0]+'__'+target[1] + '__lfld';
                //var fsel = jQuery('#'+subID).val();
                var loccode = jQuery(this).val();
                var init = false;

                getLocationFields(loccode, flID, init);
            });

        });

Mark explanation is:

I think the problem is that the select control does not exist on page load, so the on change function cannot be bound to it. The select is created when you click on the subform "add" button, so it exists when the on-group-add event is fired. So binding the control to the change event works at that point.

I will try Grant G's solution as well, I will learn and see what is possible.