Làm thế nào để kích hoạt chức năng tương tự của hai phiên bản jQuery khác nhau bằng cách sử dụng đoạn mã đơn giản ..?

Question

Tôi muốn đăng ký onchange sự kiện trên hộp chọn này ..

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

Có hai phiên bản của jQuery bao gồm trên trang của mình được tách bằng 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> 

Tôi đã đặt mã này trong 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> 

tôi đã kích hoạt onchange sự kiện trên selectbox sử dụng

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

sau đó nó thực hiện

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

nhưng không thực hiện thứ hai

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

Làm thế nào tôi có thể kích hoạt các sự kiện onchange trong đó kêu gọi tất cả các xử lý sự kiện ($ and $m)?

Answer 1

Tôi không chắc chắn nếu có một cách để làm điều này bằng cách sử dụng jQuery, nhưng bạn có thể làm điều đó bằng cách cử một đồng bằng javascript sự kiện như thế này:

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

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

làm việc Ví dụ

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

 
$('#trigger_event').on('click', function(e) { 
 
    var event = new Event('change', { 
 
    bubbles: true 
 
    }); 
 
\t 
 
    $("#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

Đây là kỹ thuật tương tự và hiện kích hoạt sự kiện trên tài liệu sẵn sàng mà không cần nhấp chuột. Thử nghiệm trên Chrome, IE và Mozilla và nó làm việc tốt:

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

tôi kiểm tra liên kết làm việc: http://zikro.gr/dbg/html/multijq-trigger/

Như bạn có thể nhìn thấy nó thậm chí còn làm việc bên trong các sự kiện tài liệu sẵn sàng.