如何使用简单的代码片段触发两个不同的jQuery版本的相同功能..？

Question

我想在这个选择框上注册onchange事件..

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

我的页面上有两个版本的jQuery,使用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>

我把这段代码放在脚本标签中..

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

我在selectbox上使用触发了onchange事件

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

然后它执行

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

但不要执行第二个

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

如何触发调用两个事件处理程序的onchange事件($ and $m)？

Answer 1

我不确定是否有办法使用 jQuery 来做到这一点，但您可以通过分派一个简单的 javascript 事件来做到这一点，如下所示：

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

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

工作示例

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

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

$("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);
});

编辑

这是相同的技术，现在无需单击即可在文档就绪时触发事件。在 Chrome、IE 和 Mozilla 上测试，运行良好：

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

$("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);
});

我的工作测试链接： http: //zikro.gr/dbg/html/multijq-trigger/

正如您所看到的，它甚至在文档就绪事件中工作。