Knockout JS removes jQuery change event
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
magento2 magento-2.1 javascript jquery knockoutjs
asked Jul 17 '17 at 7:58
codedgecodedge
15211
bumped to the homepage by Community♦ 14 mins ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
add a comment |
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
magento2 magento-2.1 javascript jquery knockoutjs
asked Jul 17 '17 at 7:58
codedgecodedge
15211
bumped to the homepage by Community♦ 14 mins ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
i think is no a magento issue, but a ko and jquery conflict, try googling.
– LucScu
Jul 17 '17 at 8:53
add a comment |
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
magento2 magento-2.1 javascript jquery knockoutjs
asked Jul 17 '17 at 7:58
codedgecodedge
15211
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
magento2 magento-2.1 javascript jquery knockoutjs
magento2 magento-2.1 javascript jquery knockoutjs
asked Jul 17 '17 at 7:58
codedgecodedge
15211
asked Jul 17 '17 at 7:58
codedgecodedge
15211
edited Jul 17 '17 at 12:02
codedge
asked Jul 17 '17 at 7:58
codedgecodedge
15211
asked Jul 17 '17 at 7:58
codedgecodedge
15211
asked Jul 17 '17 at 7:58
codedgecodedge
15211
15211
bumped to the homepage by Community♦ 14 mins ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
bumped to the homepage by Community♦ 14 mins ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
i think is no a magento issue, but a ko and jquery conflict, try googling.
– LucScu
Jul 17 '17 at 8:53
add a comment |
i think is no a magento issue, but a ko and jquery conflict, try googling.
– LucScu
Jul 17 '17 at 8:53
i think is no a magento issue, but a ko and jquery conflict, try googling.
– LucScu
Jul 17 '17 at 8:53
i think is no a magento issue, but a ko and jquery conflict, try googling.
– LucScu
Jul 17 '17 at 8:53
add a comment |
1 Answer
1
active
oldest
votes
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
answered Jul 17 '17 at 8:38
Ben CrookBen Crook
8,7202273
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 '17 at 8:41
If it has to be done with the default functionality then I have no idea sorry :(
– Ben Crook
Jul 17 '17 at 8:44
add a comment |
Your Answer
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "479"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e) {
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom)) {
StackExchange.using('gps', function() { StackExchange.gps.track('embedded_signup_form.view', { location: 'question_page' }); });
$window.unbind('scroll', onScroll);
}
};
$window.on('scroll', onScroll);
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f184025%2fknockout-js-removes-jquery-change-event%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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
answered Jul 17 '17 at 8:38
Ben CrookBen Crook
8,7202273
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 '17 at 8:41
If it has to be done with the default functionality then I have no idea sorry :(
– Ben Crook
Jul 17 '17 at 8:44
add a comment |
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
answered Jul 17 '17 at 8:38
Ben CrookBen Crook
8,7202273
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 '17 at 8:41
If it has to be done with the default functionality then I have no idea sorry :(
– Ben Crook
Jul 17 '17 at 8:44
add a comment |
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
answered Jul 17 '17 at 8:38
Ben CrookBen Crook
8,7202273
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
answered Jul 17 '17 at 8:38
Ben CrookBen Crook
8,7202273
edited Jul 17 '17 at 8:42
answered Jul 17 '17 at 8:38
Ben CrookBen Crook
8,7202273
answered Jul 17 '17 at 8:38
Ben CrookBen Crook
8,7202273
answered Jul 17 '17 at 8:38
Ben CrookBen Crook
8,7202273
8,7202273
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 '17 at 8:41
If it has to be done with the default functionality then I have no idea sorry :(
– Ben Crook
Jul 17 '17 at 8:44
add a comment |
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 '17 at 8:41
If it has to be done with the default functionality then I have no idea sorry :(
– Ben Crook
Jul 17 '17 at 8:44
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 '17 at 8:41
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 '17 at 8:41
If it has to be done with the default functionality then I have no idea sorry :(
– Ben Crook
Jul 17 '17 at 8:44
If it has to be done with the default functionality then I have no idea sorry :(
– Ben Crook
Jul 17 '17 at 8:44
add a comment |
Thanks for contributing an answer to Magento Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e) {
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom)) {
StackExchange.using('gps', function() { StackExchange.gps.track('embedded_signup_form.view', { location: 'question_page' }); });
$window.unbind('scroll', onScroll);
}
};
$window.on('scroll', onScroll);
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f184025%2fknockout-js-removes-jquery-change-event%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e) {
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom)) {
StackExchange.using('gps', function() { StackExchange.gps.track('embedded_signup_form.view', { location: 'question_page' }); });
$window.unbind('scroll', onScroll);
}
};
$window.on('scroll', onScroll);
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e) {
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom)) {
StackExchange.using('gps', function() { StackExchange.gps.track('embedded_signup_form.view', { location: 'question_page' }); });
$window.unbind('scroll', onScroll);
}
};
$window.on('scroll', onScroll);
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e) {
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom)) {
StackExchange.using('gps', function() { StackExchange.gps.track('embedded_signup_form.view', { location: 'question_page' }); });
$window.unbind('scroll', onScroll);
}
};
$window.on('scroll', onScroll);
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
i think is no a magento issue, but a ko and jquery conflict, try googling.
– LucScu
Jul 17 '17 at 8:53