How to trigger same function of two different jQuery version using simple code snippet..?

Question

I want to register onchange event on this select box ..

   <select id="demo">
        <option>Apple</option>
        <option>Orange</option>
        <option>Banana</option>
    </select>

There are two versions of jQuery included on my page that are separated using noConflict

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $m = $.noConflict(true);

      </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

I have put this code in the script tag..

<script>
        $("div#hello").on("change","select#demo",function (){
            console.log("in $ on function");
        });
        $m("select#demo").on("change",function(){
            console.log("in $m on function");
        }); 
</script>

I have triggered onchange event on selectbox using

$("#demo").val("Orange").trigger("change")

then it execute the

 $("#demo").on("change",function(){..})

but don't execute the second one

($m("#demo")..)

How can I trigger the onchange event which calls both the event handlers ($ and $m)?

Answer 1

I'm not sure if there's a way to do this by using jQuery, but you can do it by dispatching a plain javascript event like this:

var event = new Event('change', {
    bubbles: true
});

$("#demo").val("Orange")[0].dispatchEvent(event);

Working Example

$("div#hello").on("change","select#demo",function (){
	console.log("in $ on function");
});
$m("select#demo").on("change",function(){
	console.log("in $m on function");
});

$('#trigger_event').on('click', function(e) {
  var event = new Event('change', {
    bubbles: true
  });
	
  $("#demo").val("Orange")[0].dispatchEvent(event);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    $m = $.noConflict(true);
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="hello">

<select id="demo">
    <option>Apple</option>
    <option>Orange</option>
    <option>Banana</option>
</select>

</div>
<button id="trigger_event">Trigger Event</button>

EDIT

Here is the same technique and now triggers the event on document ready without clicks. Tested on Chrome, IE and Mozilla and it's working fine:

$("div#hello").on("change","select#demo",function (){
    console.log("in $ on function");
});
$m("select#demo").on("change",function(){
    console.log("in $m on function");
});

$(document).ready(function() {
    console.log('On document ready');
    
    var event = new Event('change', {
        bubbles: true
    });
        
    $("#demo").val("Orange")[0].dispatchEvent(event);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    $m = $.noConflict(true);
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div id="hello">

<select id="demo">
    <option>Apple</option>
    <option>Orange</option>
    <option>Banana</option>
</select>

</div>

My working test link: http://zikro.gr/dbg/html/multijq-trigger/

As you can see it's even working inside the document ready event.