如何通过jquery中的.on函数在多个选择器上附加不同的事件？

我的页面上有以下两个元素：

在我的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 }); }); 

我需要的是点击function按钮，只需要更改function就可以在文本字段上工作。 我该怎么做呢？

Answer 1

如果要为不同对象上的不同事件调用相同的代码，可以将事件处理代码放入公共函数中，然后在每个事件注册中指定确切的条件：

 $(document).ready(function(){ function myEventHandler(e) { // your code here } $("#button").on("click", myEventHandler); $("#textfield").on("change", myEventHandler); }); 

Answer 2

将代码拆分为：

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

你为什么把它们放在一起？

Answer 3

分开两个function：

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

Answer 4

分别分配：

 $('#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 5

尝试：

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

如果您只想要一个.on函数，请尝试使用这样的方法

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

见演示