如何使一個輸入有多個事件？

Question

我的表單中有一個按鈕和一個選擇。 該按鈕具有onclick事件，而select具有onchange事件。 如何使選擇同時具有onclick和onchange事件？

這是腳本：

$('#i_btn').on('click', function(){
     alert('Event 1');
});

$('#i_sel').on('change', function(){
     alert('Event 2');
});

當選擇更改時，它應該執行alert('Event 1'); alert('Event 2'); alert('Event 1'); alert('Event 2'); 。 我不想在onchange重寫onclick代碼

Answer 1

您可以在#i_sel的更改事件中觸發#i_btn的點擊事件

$('#i_btn').on('click', function(){
     alert('Event 1');
});

$('#i_sel').on('change', function(){
     alert('Event 2');
     $("#i_btn").trigger("click");
});

Answer 2

將事件編寫為單獨的函數：

$('#i_btn').on('click', event1);
$('#i_sel')
     .on('change', event1)
     .on('change', event2);

function event1(){
     alert('Event 1');
}

function event2(){
     alert('Event 2');
}

Answer 3

您可以在select的on更改內使用觸發器，以確保在change之前定義了單擊按鈕

 $('#btn1').on('click', function(){ alert('Clicked'); }); $('#select1').on('change', function(){ alert('Changed'); $("#btn1").trigger("click"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <select id="select1"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> <button id="btn1">click</button> 

Answer 4

您也可以簡單地將事件處理程序添加到元素中...

$('#i_btn, #i_sel').on('click', function(){
     alert('Event 1');
});

$('#i_sel').on('change', function(){
     alert('Event 2');
});

除非您確實需要單擊以觸發按鈕...