Magento2 - 添加一个小的 jquery ,它在升级前工作正常
Magento2 - add a small jquery which was working fine before upgrade
我使用的代码是这样的:
jQuery(document).ready(function($){
if(window.location.href =='https://mysite/csproduct/vproducts/new/set/4/type/simple/'){
console.log('ready');
$("[name='product[vendor_price]']").keyup(function() {
$("[name='product[price]']").val($(this).val()).change();
});
}
});
如果我将代码粘贴到控制台,它就可以工作。
即使没有粘贴我得到的代码
console.log
- 准备就绪。
除此之外,控制台没有错误。
这里使用的HTML是这样的:
<div class="admin__field _required" data-bind="css: $data.additionalClasses, attr: {'data-index': index}, visible: visible" data-index="vendor_price">
<label class="admin__field-label" data-bind="attr: {for: uid}, visible: $data.labelVisible" for="CTK9J41">
<span data-bind="attr: {'data-config-scope': $data.scopeLabel}, text: label" data-config-scope="[STORE VIEW]">Vendor Price</span>
</label>
<div class="admin__field-control" data-bind="css: {'_with-tooltip': $data.tooltip, '_with-reset': $data.showFallbackReset && $data.isDifferedFromDefault}">
<input class="admin__control-text" type="text" data-bind="
event: {change: userChanges},
value: value,
hasFocus: focused,
valueUpdate: valueUpdate,
attr: {
name: inputName,
placeholder: placeholder,
'aria-describedby': noticeId,
id: uid,
disabled: disabled
}" name="product[vendor_price]" aria-describedby="notice-CTK9J41" id="CTK9J41">
</div>
</div>
<div class="admin__field admin__field-small _required" data-bind="css: $data.additionalClasses, attr: {'data-index': index}, visible: visible" data-index="price">
<span data-bind="attr: {'data-config-scope': $data.scopeLabel}, text: label" data-config-scope="[STORE VIEW]">Price</span>
</label>
<div class="admin__field-control" data-bind="css: {'_with-tooltip': $data.tooltip, '_with-reset': $data.showFallbackReset && $data.isDifferedFromDefault}">
<div class="admin__control-addon">
<input class="admin__control-text" type="text" data-bind="
event: {change: userChanges},
value: value,
hasFocus: focused,
valueUpdate: valueUpdate,
attr: {
name: inputName,
placeholder: placeholder,
'aria-describedby': noticeId,
id: uid,
disabled: disabled
}" name="product[price]" aria-describedby="notice-JHLHU2O" id="JHLHU2O">
<label class="admin__addon-prefix" data-bind="attr: {for: uid}" for="JHLHU2O">
<span data-bind="text: addbefore">₹</span>
</label>
</div>
</div>
Magento 2 使用 Knockout.js 框架动态构建其前端的某些部分。该建筑物也会在 jQuery ready
事件触发后发生。所以可能是name='product[vendor_price]'
的元素在你找的时候DOM里面还没有
使事件侦听器工作的一种方法是使用 event delegation with on
:
$(document).on("keyup", "[name='product[vendor_price]']", function() {
$("[name='product[price]']").val($(this).val()).change();
});
注意:与您的问题无关,但请尝试使用 "input" 事件而不是 "keyup":这也将通过上下文菜单(清除、剪切、粘贴),通过其他输入设备,或者当一个键被按住并重复时。
我使用的代码是这样的:
jQuery(document).ready(function($){
if(window.location.href =='https://mysite/csproduct/vproducts/new/set/4/type/simple/'){
console.log('ready');
$("[name='product[vendor_price]']").keyup(function() {
$("[name='product[price]']").val($(this).val()).change();
});
}
});
如果我将代码粘贴到控制台,它就可以工作。
即使没有粘贴我得到的代码
console.log
- 准备就绪。
除此之外,控制台没有错误。
HTML是这样的:
<div class="admin__field _required" data-bind="css: $data.additionalClasses, attr: {'data-index': index}, visible: visible" data-index="vendor_price">
<label class="admin__field-label" data-bind="attr: {for: uid}, visible: $data.labelVisible" for="CTK9J41">
<span data-bind="attr: {'data-config-scope': $data.scopeLabel}, text: label" data-config-scope="[STORE VIEW]">Vendor Price</span>
</label>
<div class="admin__field-control" data-bind="css: {'_with-tooltip': $data.tooltip, '_with-reset': $data.showFallbackReset && $data.isDifferedFromDefault}">
<input class="admin__control-text" type="text" data-bind="
event: {change: userChanges},
value: value,
hasFocus: focused,
valueUpdate: valueUpdate,
attr: {
name: inputName,
placeholder: placeholder,
'aria-describedby': noticeId,
id: uid,
disabled: disabled
}" name="product[vendor_price]" aria-describedby="notice-CTK9J41" id="CTK9J41">
</div>
</div>
<div class="admin__field admin__field-small _required" data-bind="css: $data.additionalClasses, attr: {'data-index': index}, visible: visible" data-index="price">
<span data-bind="attr: {'data-config-scope': $data.scopeLabel}, text: label" data-config-scope="[STORE VIEW]">Price</span>
</label>
<div class="admin__field-control" data-bind="css: {'_with-tooltip': $data.tooltip, '_with-reset': $data.showFallbackReset && $data.isDifferedFromDefault}">
<div class="admin__control-addon">
<input class="admin__control-text" type="text" data-bind="
event: {change: userChanges},
value: value,
hasFocus: focused,
valueUpdate: valueUpdate,
attr: {
name: inputName,
placeholder: placeholder,
'aria-describedby': noticeId,
id: uid,
disabled: disabled
}" name="product[price]" aria-describedby="notice-JHLHU2O" id="JHLHU2O">
<label class="admin__addon-prefix" data-bind="attr: {for: uid}" for="JHLHU2O">
<span data-bind="text: addbefore">₹</span>
</label>
</div>
</div>
Magento 2 使用 Knockout.js 框架动态构建其前端的某些部分。该建筑物也会在 jQuery ready
事件触发后发生。所以可能是name='product[vendor_price]'
的元素在你找的时候DOM里面还没有
使事件侦听器工作的一种方法是使用 event delegation with on
:
$(document).on("keyup", "[name='product[vendor_price]']", function() {
$("[name='product[price]']").val($(this).val()).change();
});
注意:与您的问题无关,但请尝试使用 "input" 事件而不是 "keyup":这也将通过上下文菜单(清除、剪切、粘贴),通过其他输入设备,或者当一个键被按住并重复时。