Javascript on change event not working for delegated events

  • rkft

    (@rkft)


    1 week, 4 days ago

    Ran into this on a client site where we have a form for scheduling time off. We have a datepicker field that when a date is selected it updates a select dropdown field by selecting the day of the week for that particular date. If we use a direct binding, it works fine:

    jQuery('.forminator-custom-form .forminator-datepicker').on('change', function() { console.log('datepicker changed'); });

    However, because this is a tool to schedule time off, we needed to adapt this to use a repeater field group, and as such we changed our Javascript to use a delegated event handler:

    jQuery('.forminator-custom-form').on('change', '.forminator-datepicker', function() { console.log('delegated datepicker changed'); });

    However this fails to fire. Something within the form’s javascript event hierarchy is consuming the change event and stopping the propagation.

    I’ve set this up on a dev site where the only plugin installed is Forminator v1.48.3 running on WordPress v6.8.3. Appreciate any guidance on how we might make this work on a repeater field without having to resort to re-running our event handler attachments every time there is a click or something.

    Also… it would be handy if your javascript library triggered an event when a repeater group is added or removed (eg. forminator:repeater:add, forminator:repeater:remove).

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support Saurabh – WPMU DEV Support

    (@wpmudev-support7)

    1 week, 3 days ago

    Hello @rkft,

    Hope you’re doing well today! Thank you for reaching out to us.

    We have a datepicker field that when a date is selected it updates a select dropdown field by selecting the day of the week for that particular date. If we use a direct binding, it works fine:

    I tested the sample page that you have attached to the topic, however, when I check as of now, I don’t see the datepicker field is updating the day of the week in the select dropdown. Could you please confirm?

    However, when it comes to the trigger for the repeater field, you will need to use the forminator-clone-group trigger and then call the change function.

    Also… it would be handy if your javascript library triggered an event when a repeater group is added or removed (eg. forminator:repeater:add, forminator:repeater:remove).

    Thank you for your feedback about it, I have passed it to the Forminator team to review in case that is something that can be improved. We really appreciate it.

    Please do let us know in case you need further help.

    Kind Regards,
    Saurabh

    Thread Starter rkft

    (@rkft)

    1 week, 3 days ago

    Thank you for taking a look.

    I didn’t add the code for making the selection to the test site because I didn’t need to to demonstrate the issue (as per the code I provided). Just use that code in the dev tools to see that the on change event when using delegated events doesn’t work.

    Re: the ‘forminator-clone-group’ trigger for the repeater – I guess I could use that to re-attach event handlers using direct binding, but that defeats the purpose of delegated events.

    • This reply was modified 1 week, 3 days ago by rkft.
    Plugin Support Saurabh – WPMU DEV Support

    (@wpmudev-support7)

    1 week, 2 days ago

    Hello @rkft,

    Thanks for your reply,

    Re: the ‘forminator-clone-group’ trigger for the repeater – I guess I could use that to re-attach event handlers using direct binding, but that defeats the purpose of delegated events.

    I will need to check this further with the Forminator team. We shall update you as soon as we receive further feedback from them about it.

    In the meantime, regarding your suggestion –

    Also… it would be handy if your javascript library triggered an event when a repeater group is added or removed (eg. forminator:repeater:add, forminator:repeater:remove).

    The Forminator team suggested that we already have the events as below –

    forminator-clone-group – when a repeater group is added
    forminator-group-item-removed – when a repeater group is removed

    Kind Regards,
    Saurabh

    Plugin Support Nithin – WPMU DEV Support

    (@wpmudevsupport11)

    1 week, 2 days ago

    HI @rkft,

    Re: the ‘forminator-clone-group’ trigger for the repeater – I guess I could use that to re-attach event handlers using direct binding, but that defeats the purpose of delegated events.

    We got further feedback, and using that, the ‘change’ event does not help in this scenario. Reattaching event handlers via direct binding, as you stated, is likely the simplest and most effective option for your requirements.

    Please do let us know if you have any further queries.

    Regards,

    Nithin

    Thread Starter rkft

    (@rkft)

    1 week, 2 days ago

    I’m curious about that ‘feedback’ … what is it and why would you not want delegated events to work inside your forms?

    Plugin Support Kris – WPMU DEV Support

    (@wpmudevsupport13)

    1 week, 1 day ago

    Hi @rkft

    I pinged our Forminator Team to review your query. We will post an update here as soon as more information is available.

    Kind Regards,
    Kris

Viewing 6 replies - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.