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

Question

我想在此 select 框上注册 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);

工作示例

$("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>

编辑

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

$("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>

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

如您所见，它甚至在文档就绪事件中起作用。

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

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

jquery

jquery-events