如何通過jQuery中的.on函數在多個選擇器上附加不同的事件？

Question

我有兩個要素如下我的網頁上：

<input type="text" id="textfield"/> 
<input type="button" id="button" value="CLICK"/> 

而且在我的JavaScript代碼，我有以下幾點：

$(document).ready(function() { 
    $("#button,#textfield").on("click change",function() { 
      // This won't work because I don't need click function 
      // to be worked on the text field 
    }); 
}); 

我需要的是要在按鈕的工作點擊功能，只需要更改要在文本字段上工作的功能。我該怎麼做呢？

Answer 1

分割你的代碼：

$(document).ready(function(){ 
    $("#button").on("click",function(){ 

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

    }); 
}); 

你爲什麼把它們放在一起？

Answer 2

如果你想被要求對不同的對象不同的事件相同的代碼，你可以把事件處理代碼到一個共同的功能，然後指定每個事件註冊的確切條件：

$(document).ready(function(){ 
    function myEventHandler(e) { 
     // your code here 
    } 

    $("#button").on("click", myEventHandler); 
    $("#textfield").on("change", myEventHandler); 
}); 

Answer 3

嘗試：

$(document).ready(function(){ 
    $("#textfield").on("change",function(e){ 
     my_function(e); 
    }); 

    $("#button").on("click",function(e){ 
     my_function(e); 
    }); 

    function my_function(e){ 
     // e = event... 
     // your actions... 
    } 
}); 

Answer 4

獨立的兩個功能：

$("#button").on("click change",function(){ 
    // Handle button 
}); 

$("#textfield").on("change",function(){ 
    // Handle Textfield 
}); 

Answer 5

指定他們separatel Y：

$('#button').click(function(){ 
    //button code here 
}); 

$('#textfield').change(function(){ 
    // text field code here 
}); 

如果你想讓他們做同樣的事情，創建一個單獨的功能：

function doSomething() { 
    // text field and button code here 
} 

，然後引用該函數：

.click(doSomething); 
... 
.change(doSomething); 

而且，我應該告訴你，「改變」並不會做你對文本領域的想法。只有在更新文本字段後「模糊」文本字段時，它纔會在輸入時觸發。這是更多的複選框和這種性質的東西。我會用這樣的使用.keyup()

Answer 6

嘗試，如果你只想要一個。對功能

$("#button,#textfield").on("click change",function(){ 
if ($(this).attr('type') == "text"){ 
     alert("Do your change function"); 
} 
else if ($(this).attr('type') == "button"){ 
    alert("Do your click function"); 
} 
}); 

See Demo