如何强制在选择元素上发生更改事件答案

【问题标题】：How to force change event to occur on select element如何强制在选择元素上发生更改事件
【发布时间】：2017-09-17 12:12:55
【问题描述】：

JQuery 更改事件有时不会触发。

要重现，请从位置选择元素中选择一些新值。不出现警告框。所以更改事件不会在选择值更改时触发。

如何解决？

<html>
<head>

<script type="text/javascript" src="https://www.omniva.ee/widget/widget.js"> </script>

<link rel="stylesheet" type="text/css" href="https://www.omniva.ee/widget/widget.css">
<script
  src="https://code.jquery.com/jquery-2.2.4.js"
  integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
  crossorigin="anonymous"></script>

</head>
<body>

<div id="omniva_container1"></div>

<script>

$(function () { 
  $( "#omniva_select1" ).change(function() {
 alert('Change event does not fire');
  });
  });

var wd1 = new OmnivaWidget();
</script>

</body>

【问题讨论】：

我认为您正在尝试将事件侦听器附加到尚不存在的 DOM 元素。
是否应该使用 javascript setTimeout 方法来延迟事件附加，或者如果创建元素，是否可以为将来定义事件附加？

标签： javascript jquery html-select jquery-events

【解决方案1】：

您的问题是您试图将事件侦听器附加到尚不存在的 DOM 元素。

<html>
<head>

<script type="text/javascript" src="https://www.omniva.ee/widget/widget.js"> </script>

<link rel="stylesheet" type="text/css" href="https://www.omniva.ee/widget/widget.css">
<script
  src="https://code.jquery.com/jquery-2.2.4.js"
  integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
  crossorigin="anonymous"></script>

</head>
<body>

<div id="omniva_container1"></div>

<script>

// Wait for element to exist.
function elementLoaded(elementQuery, callback) {
  let queryForElement = function() {
    // Query the DOM for any elemnets matching the elementQuery parameter
    if ($(elementQuery).length) {
      // Found elemnet(s) matching the elementQuery, aka Element is now loaded.
      callback($(elementQuery));
    } else {
      // Query again in 500ms. (minimum delay)
      setTimeout(queryForElement, 500);
    }
  }
  queryForElement();
};

elementLoaded('#omniva_select1', function(element) {
  // Element is ready to use.
  console.log('Attatched');
  element.change(function() {
    console.log('Triggered');
  });
});

var wd1 = new OmnivaWidget();
</script>

</body>

上面的代码每 500 毫秒检查一次与提供的查询字符串匹配的元素。然后它调用提供的回调并终止。

【讨论】：

解决问题的最佳做法是什么？ widget.js 在第三方服务器中，无法在此服务器中更改..
@Andrus 你应该看看this question，它是关于如何在元素被注入到 DOM 之后运行一些 JS 的。
@Andrus 我已经更新了我的答案，以反映上述帖子中的解决方案之一。