Question

我在集成几个jQuery插件时遇到了一个问题。

我正在电子商务网站上使用第三方插件来提供“邮政编码查询”功能。这个库已经提供了缩小的源代码，因此很难调试，但绑定到我们网站上的现有表单，当各个字段与之交互时出现弹出窗口（为了在帖子上搜索地址库/邮政编码）

<select id="countries"><!-- options--></select>

这适用于常规表单（事件在原生'select'元素上触发，后者又启动插件，在这种情况下，从此下拉列表中选择一个国家/地区后）

然后我添加了'chosen.js'插件（http://harvesthq.github.io/chosen/），以便为select字段提供一些额外的功能（使其可搜索）。此插件与第三方插件绑定到相同的元素，隐藏“真实”选择元素并使用样式化标记和css构建“假”选择菜单。当这个'假'表单元素与之交互时，它会在小部件与之交互时触发'真实'表单选择元素上的事件。

修改从未经过模糊处理的来源我已经确定了这个变化最初被捕获的地方......这对我来说并不是很重要......

function u(n) {
    function u() {
        e.focus(n)
    }
    (i.append(e.element), n && n.tagName) && (i.inputField(n) && (t(n, "keyup", e.keyup), t(n, "keydown", e.keydown), t(n, "focus", u), t(n, "blur", e.blur), t(n, "keypress", e.keypress), n == r.activeElement && u()), t(n, "click", function() {
        e.click(n)
    }), t(n, "dblclick", function() {
        e.dblclick(n)
    }), t(n, "change", function() {
        e.change(n)
    }))
}

我可以将自己的调试事件绑定到此函数，我可以看到在底层元素上触发事件。

$('select').on('change', function(){ console.log('changed!'); });

但是 - 我发现selected.js插件正在破坏邮政编码查找插件。它似乎没有像单独的select元素一样触发事件。

我已经挖掘了源（http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.js）并找到了以下函数：

Chosen.prototype.result_select = function(evt) {
      // .... snip
      // where 'this.form_field_jq' is a jQuery wrapped 'select'
      this.form_field_jq.trigger("change", {
        'selected': this.form_field.options[item.options_index].value
      });
  }
};

可以看出 - 底层元素正在触发更改事件，我可以通过调试事件侦听器查看结果。然而，这个事件并没有被邮政编码查找库选中。然而如果我将'native'事件添加到同一个函数iwhtin chosen.js（不使用jQuery） - 该插件会被触发。

Chosen.prototype.result_select = function(evt) {
      // .... snip
      // where 'this.form_field_jq' is a jQuery wrapped 'select'
      this.form_field_jq.trigger("change", {
        'selected': this.form_field.options[item.options_index].value
      });
      // everything works together if I add these two lines
      var myEvent = new CustomEvent('change');
      this.form_field_jq.get(0).dispatchEvent(myEvent);
      // the other plugin is triggered after dispatching this event.
  }
};

这里可能会发生什么？

jQuery事件触发vs Native。无法解释分歧

0 个答案: