title: React jsx version of html (using different tags, but same attribute and logic) isn't triggering jquery on('change') method
body: <p>I'm migrating jQuery/javascript code into React piecemeal and for some reason I can't activate the "change" event when a value is changed React/Redux as it it's down in html. Does anyone know why this might be the case that the "change" event isn't being fired?</p>
  
  <p>The original html code:</p>
  
  <pre><code>&lt;div class="form-group row" style="margin-top: 10px!important;" &gt;
    &lt;div class="col-md-2"&gt;&lt;lang data-key="Resolution" /&gt;&lt;/div&gt;
    &lt;div class="col-md-4"&gt;
       &lt;select class="form-control" id="screensize" style="width:100%;"&gt;
          &lt;option value="1920x1080" &gt;1920 x 1080&lt;/option&gt;
          &lt;option value="1680x1050"&gt;1680 x 1050&lt;/option&gt;
          &lt;option value="1440x900"&gt;1440 x 900&lt;/option&gt;
          &lt;option value="1280x800"&gt;1280 x 800&lt;/option&gt;
          &lt;option value="1024x768"&gt;1024 x 768&lt;/option&gt;
          &lt;option value="800x640" selected&gt;800 x 640&lt;/option&gt;
       &lt;/select&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My react version of this.</p>
  
  <pre><code>import React from 'react';
  import { connect } from 'react-redux';
  
  const mapStateToProps = state =&gt; {
      return {
          ...
          settings: state.settings,
      };
  };
  class DomStateWrapper extends React.Component {
     constructor(props) {
        super(props);
     }
     render() {
        return (
            &lt;div&gt;
               ...
               &lt;input
                  id="screensize"
                  value={this.props.settings.resolution}  //** I have confirmed that this attribute gets its value from the redux store successfully
               /&gt;
               ...                      
            &lt;/div&gt;
  
        )
     }
  }
  
  export default connect(mapStateToProps)(DomStateWrapper);
  </code></pre>
  
  <p>The jQuery code I'm using to consume the change </p>
  
  <pre><code>      $(document).on("change", "#screensize", function(e) {
          var sizes = $(this)
            .val()
            .split("x");
          if (showWin != null) showWin.resizeTo(sizes[0], sizes[1]); // resize the popup
        });
  </code></pre>
  
  <p>Overall, the original html version of this code which uses ,  and sets its value and triggers the change method in the jquery code, but when I do it in react/redux, using , that .on() method is never triggered. I also used this website as reference for the "change" event.</p>
  
  <p><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event</a></p>