如何强制更改事件发生在 select 元素上

Question

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

要重现，select 来自位置 select 元素的一些新值。不出现警告框。因此更改事件不会在 select 值更改时触发。

如何解决？

<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>

Answer 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 毫秒检查一次与提供的查询字符串匹配的元素。然后调用提供的回调并终止。

如何强制更改事件发生在 select 元素上

How to force change event to occur on select element

javascript

jquery

html-select

jquery-events