Question

在产品页面上，客户可以从不同的变体中进行选择。在“选择”元素中，存储所有变体。该元素被隐藏，无显示。因此，用户可以使用所有喜欢的东西（例如色板和其他有趣的东西）来选择变体，但在引擎盖下，它只是一个“选择”元素，用于跟踪所使用的变体。其值为变量ID。
我正在附上图片，以更清楚地了解发生了什么。

目标：在更改变体时获取变体ID。

问题：我无法在此选择元素上检测到更改事件。

限制：我不允许触摸此代码的HTML。我只能在运行时在此页面上的<head>标签中添加一个javascript文件，并且需要检测该脚本中的 change 事件。

$(document).ready(function(){

 $('body').on('change', "select[name='id']",  function(){

   console.log('here');

 });


});

我可以随时使用以下代码获得其值。

console.log($("select[name='id']").val());

是否有任何想法无法检测到为什么更改事件？

Answer 1

通过jQuery文档change()进行编程设置val()时不会触发

注意：例如，使用JavaScript更改输入元素的值，例如使用.val（）不会触发该事件。

设置val()

时需要手动执行

$("select[name='id']").val(354).trigger('change');

编辑[0] ：在您对要执行的操作发表评论后，我快速浏览了js。

我发现template触发了自定义事件variantChange

$("#ProductSection--product-template").on("variantChange", function(evt){alert($("select[name='id']").val());});

祝你好运；

Answer 2

我认为应该知道是什么触发的，我的意思是，如果在更改尺寸选择时进行更改，则在其中获得所需的值，例如：

$(document).on("change","#select1",function(){
  var valuneed = $("#select2").val();
  console.log(valuneed);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1">
<option value="11">size a</option>
<option value="21">size b</option>
</select>

<select id="select2">
<option value="21">value a</option>
<option value="22">value b</option>
</select>

如果第二次选择的更新需要一秒钟（通常），那么您只需添加一个settimeout

如果不仅仅是触发，那么您：

$(document).on("change","#select1, #selector2, #selector3",function(){

让我知道这是否是您所需要的。

Answer 3

由于目标是获取变体ID的当前值，因此这就是我的处理方法。

获取值不是问题，因此在页面加载时，将初始值存储在 localStorage 中，然后侦听表单上的change事件。幸运的是，更改事件是在Form元素上触发的。

        $('body').on('change', 'form[action^="/cart/add"]', function () {

            console.log($('select[name="id"]').val());

        });

将值与先前的值进行比较，看看其是否更改。如果是，那就做我的事。如果不是，请等待表单上的另一个更改事件。是的，我希望它可以长期运行。

谢谢大家！

在隐藏的选择元素上检测更改事件

3 个答案: