How to force change event to occur on select element

Question

JQuery change event does not fire sometimes.

To reproduce, select some new value from location select element. Alert box does not appear. So change event does not fire on select value change.

How to fix it ?

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

I think you are trying to attach an event listener to a DOM element that doesn't exist yet. — Olian04, Sep 17 '17 at 12:15
Should javascript setTimeout method used to delay event attach or can event attachment defined for future if element is created? — Andrus, Sep 17 '17 at 12:16

Olian04 · Accepted Answer · 2017-09-18T10:48:28.980

Your problem is that you are trying to attach an event listener to a DOM element that doesn't exist yet.

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

The code above checks every 500ms for an element that matches the query string provided. It then calls the provided callback and terminates.

What is best practice to fix the issue ? widget.js is in third party server and cannot changed in this server.. — Andrus, Sep 17 '17 at 12:21
@Andrus You should probably have a look at [this question](https://stackoverflow.com/questions/5525071/how-to-wait-until-an-element-exists), its about how you can run some JS after an element has been injected into the DOM. — Olian04, Sep 17 '17 at 12:29
@Andrus I've updated my answer to reflect one of the solutions in the aforementioned post. — Olian04, Sep 17 '17 at 12:32

How to force change event to occur on select element

1 Answers1