How to call the same function from two different versions of jQuery using a simple piece of code ..?

Question

I want to register the onchange event in this selection field.

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

Two versions of jQuery are included on my page, which are shared 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 put this code in a 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 raised the onchange event on selectbox using

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

then he performs

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

but not fulfill the second

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

How can I raise an onchange event that fires both event handlers ($ and $m) ?

Answer 1

I'm not sure if there is a way to do this using jQuery, but you can do this by sending a simple 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 method and now fires an event on a document without clicks. Tested in Chrome, IE and Mozilla, and it works great:

 $("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 even works inside the document ready event.