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

Single event function for text, check box, select input using Jquery

本文关键字：复选框 使用 Jquery 输入 选择 函数 单事件 事件 文本      更新时间：2023-09-26

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

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   
    }

请帮帮我

提前谢谢你

你可以

使用这样的东西。但这会触发 ：text 的更改和输入事件。

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

吉斯菲德尔

将一个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.
    }); 
});

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

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

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

这是一个 JSFiddle 工作示例

使用 class 属性将单个/多个事件与多个元素绑定。为所有元素分配相同的类，并查找已触发的事件类型。根据触发的事件代码，您的实现。

试试这种方式：

.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" />

j查询 ：

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

js小提琴

资源：

事件类型.类型

event.target.nodeName

相关文章：