触发输入变化

Question

我编写了一些代码来更改 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，但我试图将它隔离在代码笔中，但无法使其正常工作。

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

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

但是不行。我还运行通过加载其他事件，但在开发工具中它显示代码监听 "change"。

有谁知道为什么我无法触发更改？

Answer 1

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

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

您在此处看到的原型代码正在设置 "listener" 以更改您将在 jQuery 中作为 $(#super-product-list input.qty) 输入处理的内容。

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

如果您想更改这些输入之一，您需要在设置其值之前将其隔离。

假设在您的 #super-product-list 元素中有三个 select 类名称为 qty 的选择器。你想把第三个改成10:

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

或者，比这更聪明的是，你给第三个添加一个 ID，然后你的代码就短多了：

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

在任何一种情况下，这将从您的 select 发送 "change" 事件，并且 updateGroupedPrice 方法将观察到该事件并执行您编写的任何代码。

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

最后，如果您真的非常非常想将整个页面上的每个 #super-product-list select.qty 元素更改为“10”，您可以在 Prototype.js:

中执行此操作

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

触发输入变化

Triggering change on input

javascript

jquery

magento

prototypejs