javascript - 如何通过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(){  
    function myEventHandler(e) {
        // your code here
    }

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

Answer 2

如果您只想要一个 .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");
 }
});

看演示

Answer 3

将您的代码拆分为：

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

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

     });
});

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

Answer 4

尝试：

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

分为两个功能：

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

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

Answer 6

分别分配它们：

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