How to handle click event on configurable product attribute swatch on product page?

Question

How can i handle click event on configurable product attribute on product page. i am trying to below code but its not work.

<script type="text/javascript">
        require(['jquery'],function($){ 
            $("document").ready(function(){
                var data = '<?php echo $block->getJsonConfig(); ?>';
                var itemValue = JSON.parse(data);
                var optionCollection = itemValue.index;
                jQuery(".swatch-option").click(function(){
                    var optionId = $(this).attr("option-selected");
                    alert(optionId);
                });             
            });         
        }); 
</script>

Answer 1

Please replace your code below code. If possible add code in /var/www/html/mage2/vendor/magento/module-catalog/view/frontend/templates/product/view/options/wrapper.phtml

<script type="text/javascript">
        require(['jquery'],function($){ 
            jQuery(document).on('click', '.swatch-option',function(){
                var optionId = jQuery(this).attr("option-id");
                 alert(optionId);                       
            });         
        }); 
</script>

Note: Dont forget to override core template file and remove/clear cache before test.