如何使用简单的代码片段触发两个不同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")..)

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

的onchange事件

Answer 1

我不确定是否可以通过使用jQuery来实现此目的，但您可以通过调度这样的简单javascript事件来实现：

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

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

工作示例

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

修改

这是相同的技术，现在可以在没有点击的情况下触发文档就绪。在Chrome，IE和Mozilla上测试过，它运行良好：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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