Unable to Find js of data-action=“add-to-wishlist” in magento 2

Question

I want to find where JS is written for data-action="add-to-wishlist" in Magento 2

I saw add-to-wishlist and data-action many times and on research I found the action in this file Mageto_Wishlit/js/addtowishlist.js

Here is a widget with two functions as below.

bindFormSubmit: function () {
    var self = this;

    $('[data-action="add-to-wishlist"]').on('click', function (event) {
        var element, params, form, action;
    alert("Hi I am Here");
        event.stopPropagation();
        event.preventDefault();

        element = $('input[type=file]' + self.options.customOptionsInfo);
        params = $(event.currentTarget).data('post');
        form = $(element).closest('form');
        action = params.action;

        if (params.data.id) {
            $('<input>', {
                type: 'hidden',
                name: 'id',
                value: params.data.id
            }).appendTo(form);
        }

        if (params.data.uenc) {
            action += 'uenc/' + params.data.uenc;
        }

        $(form).attr('action', action).submit();
    });
}

And

_updateAddToWishlistButton: function (dataToAdd) {
    var self = this;

    $('[data-action="add-to-wishlist"]').each(function (index, element) {
        var params = $(element).data('post');
        alert("Hi I am Here");

        if (!params) {
            params = {
                'data': {}
            };
        }

        params.data = $.extend({}, params.data, dataToAdd, {
            'qty': $(self.options.qtyInfo).val()
        });
        $(element).data('post', params);
    });
},

I have tried to interupt these two events by adding alert but I'm not getting any success on this.

Answer 1

You should take a look at vendor/magento/magento2-base/lib/web/mage/dataPost.js

postTrigger: ['a[data-post]', 'button[data-post]', 'span[data-post]'],

When clicking those element types, it will trigger a post action.

For this file Mageto_Wishlit/js/addtowishlist.js, I don't dive depth yet. But, we can see the options:

options: {
    bundleInfo: 'div.control [name^=bundle_option]',
    configurableInfo: '.super-attribute-select',
    groupedInfo: '#super-product-table input',
    downloadableInfo: '#downloadable-links-list input',
    customOptionsInfo: '.product-custom-option',
    qtyInfo: '#qty'
},

This file will affect bundle, configurable, grouped, downloadable products and custom options.