Question

当在表单上发生以下事件时，我必须做同样的事情

1）通过键盘或鼠标更改输入文本框值（粘贴） 2）选中/取消选中复选框 3）更改选择选项

目前我在做

$(':text').on('input', function()  {
  //Same code   
}

$(':checkbox').on('change', function()  {
  //Same code
}

$('select').on('change', function()  {
  //Same code
}

但我想为所有像

这样的事件编写单一功能

  $(':text', ':checkbox', 'select' ).on('???', function()  {
      //Same code   
    }

请帮帮我

提前谢谢

Answer 1

你可以使用这样的东西。但这会触发：text。

的更改和输入事件

$(':checkbox, :text, select').on('change input',function(e)  {
    //code
});

JSFIDDLE

Answer 2

为这些输入框添加一个CSS类，并使用该类作为jQuery选择器来绑定事件。

HTML

<input type="text" class="changable" />
<input type="checkbox" class="changable" />

和jQuery

$(function(){
   $(document).on("change",".changable",function(e){
      var _this=$(this);
     // do something now.
    }); 
});

Answer 3

我建议使用@ Shyju的答案，因为它更具可扩展性和友好性，但根据您的问题，这是一个实现。

收听点击事件的文档并将其委托给您传入的选择器：

$(document).on('click', ':text, :checkbox, select', function()  {
  doFunction();
});

这里是JSFiddle working example

Answer 4

使用class attribute将您的单个/多个事件与多个元素捆绑在一起。将相同的类分配给所有元素，并查找已触发的事件类型。根据已解雇的事件代码您的实现。

尝试这种方式：

HTML：

<input class="elements" type="text" />
<input class="elements" type="checkbox" />
<select class="elements">
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

<input class="elements" type="button" value="Click here" />

jQuery：

$(".elements").on("change click", function(e){
    var nodes = e.target;
    if(nodes.nodeName == "INPUT"){
        if(nodes.type == "text" && e.type == "change"){
            // code goes here
            alert("Input changed");
        }else if(nodes.type == "checkbox" && e.type == "change"){
           // code goes here
            alert("Checkbox state changed");
        }else if(nodes.type == "button" && e.type == "click"){
            alert("Button is clicked");
        }
    }
    else if(nodes.nodeName == "SELECT" && e.type == "change"){
        // code goes here
       alert("Select option changed");
    }
});

jsFiddle

资源：

event.type

event.target.nodeName

单个事件函数用于文本，复选框，使用Jquery选择输入

4 个答案: