Magento – Knockout JS removes jQuery change event

javascriptjqueryknockoutjsmagento-2.1magento2

I don't know if it is specific to Magento 2 but an already set up HTML node with jQuery change event attached to it will lose its change event when run inside a knockout component with attached VM (view model).

Situation in Magento:

I moved the product options wrapper via a layout xml into a custom block

<referenceBlock name="product.info.form.options">
    // Custom block definition
    <move element="product.info.options.wrapper" destination="custom.block" />
</referenceBlock>

That works without any issues!

Now when wrapping around this moved block a knockout model with Magentos custom "scope" binding, all applied onChange events are getting removed – which means in this case the configurable option select boxes staying disabled.

The change events are getting applied here

$(element).on('change', this, this._configure);

.. which also seems right for me on how to add an event.

So in my template file I do the following to wrap my knockout component (with attached VM) around this html snippet:

<div class="tab-content" data-step="1" data-bind="scope:'times'">
    <?php echo $block->getChildHtml('product_options_wrapper'); ?>
</div>

With change event on product wrapper dropdowns:

Withoout change event on dropdowns when nested inside Knockout component:

Anybody knows if this a thing between KnockoutJS and jQuery or if this has something to do with Magento?

For reference on StackOverflow:

https://stackoverflow.com/questions/45113064/jquery-change-event-removed-when-in-knockout-scope

Best Answer

I'm not sure why the on change event is removed (conflict maybe?), but you can do something similar with Knockout itself:

<select data-bind="event:{ change: yourFunction}">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

Helpful links

This looks better practice to me rather than mixing KO and jQuery.

There is a Fiddle with a none Magento example here.
This answer is also pretty helpful.
Select option binding documentation
Options binding

Related Solutions

Magento – jQuery event listeners working most of the time but not sometimes

You have to set jQuery dependency for your custom script. You have occurance of problem because of dependency issue.

For Module/Extension Level

You can set at module/extension level dependency like below,

app/code/Packagename/Modulename/view/frontend/requirejs-config.js

var config = {
    paths: {            
            'slider': "Packagename_Modulename/js/slider"
        },   
    shim: {
        'slider': {
            deps: ['jquery']
        }
    }
};

Add slider.js inside path, app/code/Packagename/Modulename/view/frontend/web/js/slider.js

You can use in any template file like this,

<script>
    require(["jquery","slider"],function($)(){
        $(document).ready(function() {
            $(element).slider({
                   //option
            });
        });
    });
</script>

Theme Level

If you want to apply require js changes at theme level, Go to theme module,

app/design/frontend/{Packagename}/{themename}/Packagename_Modulename/requirejs-config.js

Set your theme required js file in requirejs-config.js

var config = {
    paths: {            
            'slider': "Packagename_Modulename/js/slider",
            'customjsfile': "Packagename_Modulename/js/customjsfile",
        },   
    shim: {
        'slider': {
            deps: ['jquery']
        },
        'customjsfile':{
            deps: ['jquery']
        }
    }
};

Add your js file inside web folder of theme,

app/design/frontend/{Packagename}/{themename}/Packagename_Modulename/web/js/slider.js
app/design/frontend/{Packagename}/{themename}/Packagename_Modulename/web/js/customjsfile.js

In your template file,

<script>
    require(["jquery","slider","customjsfile"],function($)(){
        $(document).ready(function() {
            $(element).slider({
                   //option
            });
        });
    });
</script>

For your case,

Keep below config in requirejs-config.js file,

var config = {
    paths: {            
            'footerContact': 'Module_Contact/js/contact'
        },   
    shim: {
        'footerContact': {
            deps: ['jquery']
        }
    }
};

Inside phtml file,

<script>
  require(["jquery","footerContact"],function($)(){
    jquery('.element').on('click', function(event) {
        console.log('logging');
    });
  });
</script>

Magento – Magento 2 – Will x-magento-init tag apply from a html template

I'm still not entirely sure on what data you need to pass through, you can pass data to HTML templates the same was you would to a PHTML template.

A simple example:

Ben/TemplateTest/view/frontend/templates/container.phtml

<div data-bind="scope: 'templateTest'">
    <!-- ko template: getTemplate() --><!-- /ko -->
</div>

<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "templateTest": {
                        "component": "Ben_TemplateTest/js/template-test"
                    }
                }
            }
        }
    }
</script>

Ben/TemplateTest/view/frontend/web/template/test.html

<h2>Template Test</h2>

<p data-bind="text: message"></p>

Ben/TemplateTest/view/frontend/web/js/template-test.js

define(['jquery', 'ko', 'uiComponent', 'domReady!'], function($, ko, Component) {
    'use strict';

    return Component.extend({
        initialize: function() {
            this._super();
        },

        defaults: {
            message: 'This is a test message!',
            template: 'Ben_TemplateTest/test'
        }
    });
});

Here you can see the data being passed through to the HTML template.

Adding extra templates

To call additional templates you can use:

<!-- ko template: "Package_Namespace/template-name" --><!-- /ko -->

Or pass it a property from your JS:

<!-- ko template: someProp --><!-- /ko -->