时间戳

首页 > 解决方案 > 触发输入变化

javascript - 触发输入变化

问题描述

我编写了一些代码来更改 magento 1.9 电子商务网站上的输入数量。

jQuery("input.qty").val("10");

问题是触发更新总数的javascript不会触发。我发现代码负责，它看起来像这样：

(function() {
  var qtyFields = $('super-product-list').select('input.qty');
  qtyFields.each(function(el) {
    el.observe("change", updateGroupedPrice);

  });

  Event.observe(window, "load", updateGroupedPrice);

  function updateGroupedPrice() {
    //do stuff
  }
})();

我认为这是使用prototype.js，但我试图将其隔离在codepen中但无法使其正常工作。

我试图像这样触发更改事件：

jQuery("input.qty").trigger("change")

但它不起作用。我还运行了许多其他事件，但在开发工具中它显示了监听“更改”的代码。

有谁知道为什么我不能触发更改？

标签： javascriptjquerymagentoprototypejs

解决方案

由于该页面使用 Prototype.js，您应该继续使用它来触发您的更改。如果您将 jQuery 引入其中，您将 a) 加载 Prototype 已经完成的另一个完整副本，并且 b) 要求在隔离$()两个库中的方法这一事实时遇到很多麻烦。

你的 jQuery 对我来说也有点可疑。您正在设置一个选择器的值（我想），但您正在使用类名对其进行寻址，因此页面中可能存在多个select.qty，并且它们都将更改为值 10，触发（可能）多个回调函数。

您在此处看到的原型代码正在设置一个“侦听器”，用于更改您将在 jQuery 中作为$(#super-product-list input.qty)输入处理的内容。

jQuery 总是将$()其视为返回一个对象数组，因此它的所有方法都作用于该数组，即使它只包含一个成员。Prototype 有两种不同的方法来访问 DOM 中的元素：$('some_id')，它总是返回一个元素（或者没有，如果不匹配），和$$('some css selector')，它总是返回一个数组（零个或多个匹配元素）。您会以不同的方式编写（或使用本机）回调方法，具体取决于您用于收集元素的访问器。

如果要更改这些输入之一，则需要在设置其值之前对其进行隔离。

假设您的元素中有三个带有类名qty的选择器#super-product-list。您想将第三个更改为 10：

$('super-product-list').select('input.qty').last().setValue('10');

或者，比这更聪明，您将 ID 添加到第三个，然后您的代码会更短：

$('quantity_3').setValue('10');

在任何一种情况下，这都会从您的选择中发送“更改”事件，并且该updateGroupedPrice方法将观察并执行您编写的任何操作。

您不需要（也不应该）触发该change事件——这是一个“本机”事件，浏览器拥有它。jQuery trigger()（fire()在 Prototype 中，专门用于“合成事件”，就像您在 Bootstrap 中看到的那样：show.bs.modal、、hide.bs.modal等。您可以通过名称中的标点符号来发现它们；通常用点或冒号来命名事件并避免与其他事件发生冲突代码。

#super-product-list select.qty最后，如果你真的，真的，真的想将整个页面上的每个元素都更改为“10”，你可以在 Prototype.js 中这样做：

$$('#super-product-list select.qty').invoke('setValue', 10);

推荐阅读