Magento JS Widget not able to observe submit event on Reorder widget

Question

I am working on Reorder product widget of Magento located as vendor/magento/module-sales/view/frontend/templates/reorder/sidebar.phtml

It contains the list of products which are recently ordered and customer can check on multiple products to add them to cart.

I need to fire a tracking script once the user has clicked on addToCart button. I am trying to observe the submit event to fire the tracking script.

However, I am not able to fire the submit event on widget. The widget loads on page reload however, it doesn't observe the submit event. The method I am trying to do is as below

In sidebar.phtml file I have initialized the widget on submit button as below:

data-mage-init='{
   "Magento_Sales/js/reorder-item": {
       "formSelector": "#reorder-validate-detail"
    }
}'

and in reorder-item file, i am trying to read event as below

define([
    'jquery',
    'jquery/ui'
], function ($, ui) {
    'use strict';

    $.widget('gtm.reorderFormSubmit', {
        options: {
            formSelector: ''
        },
        _create: function () {
            this.orderForm = $(this.options.formSelector);
            alert(this.orderForm);

            $("#reorder-validate-detail").submit( function (e) {
                alert('hill');
            });

            this.orderForm.on('submit', $.proxy(function (e) {
               alert('Form Submit');
            }, this));

            this.orderForm.onsubmit = function () {
                alert('hello');
            }

        }
    });

    return $.gtm.reorderFormSubmit;
});

None of the three methods work. Can anyone suggest on how this can be done?

Answer 1

Try the below method.

$(document).on('submit', '#reorder-validate-detail', function () {
      alert('form submitted');
});