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" />

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'); ?>

With change event on product wrapper dropdowns:

enter image description here

Withoout change event on dropdowns when nested inside Knockout component:

enter image description here

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

For reference on StackOverflow:


  • i think is no a magento issue, but a ko and jquery conflict, try googling.
    – LucScu
    Jul 17, 2017 at 8:53

1 Answer 1


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>

Helpful links

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

  • The thing is, I want to use the configurable attribute filter options incl. the logic Magento already ships with. So the dependency between multiple options getting enabled/disabled - that is why I moved the complete wrapper and why I cannot apply my own event. Hope that was clear.. oO
    – codedge
    Jul 17, 2017 at 8:41
  • If it has to be done with the default functionality then I have no idea sorry :(
    – Ben Crook
    Jul 17, 2017 at 8:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.