Javascript jQuery '如果 .change() 或 .keyup()'

jQuery 'if .change() or .keyup()'

提问by cnotethegr8

Using jQuery i would like to run a function when either .change()or .keyup()are raised.

使用 jQuery，我想在引发.change()或时运行一个函数.keyup()。

Something like this.

像这样的东西。

if ( jQuery(':input').change() || jQuery(':input').keyup() )
{
    alert( 'something happened!' );
}

EDIT

编辑

Sorry i forgot to mention. Both .change()and .keyup()need some of the variables to be in-scope.

抱歉我忘了提及。双方.change()并.keyup()需要一些变量是在范围内。

回答by keeganwatkins

you can bind to multiple events by separating them with a space:

您可以通过用空格分隔多个事件来绑定到多个事件：

$(":input").bind("keyup change", function(e) {
    // do stuff!
})

docs here.

文档在这里。

hope that helps. cheers!

希望有帮助。干杯！

回答by Joshua Burns

If you're ever dynamically generating page content or loading content through AJAX, the following example is really the way you should go:

如果您曾经通过 AJAX 动态生成页面内容或加载内容，那么下面的示例确实是您应该采用的方式：

1. It prevents double binding in the case where the script is loaded more than once, such as in an AJAX request.
2. The bind lives on the bodyof the document, so regardless of what elements are added, moved, removed and re-added, all descendants of bodymatching the selector specified will retain proper binding.

1. 在多次加载脚本的情况下，例如在 AJAX 请求中，它可以防止双重绑定。
2. 绑定存在于body文档的 ，因此无论添加、移动、删除和重新添加什么元素，body匹配指定选择器的所有后代都将保留正确的绑定。

The Code:

编码：

// Define the element we wish to bind to.
var bind_to = ':input';

// Prevent double-binding.
$(document.body).off('change', bind_to);

// Bind the event to all body descendants matching the "bind_to" selector.
$(document.body).on('change keyup', bind_to, function(event) {
    alert('something happened!');
});

Please notice! I'm making use of $.on()and $.off()rather than other methods for several reasons:

请注意！出于以下几个原因，我正在使用$.on()and$.off()而不是其他方法：

1. $.live()and $.die()are deprecated and have been omitted from more recent versions of jQuery.
2. I'd either need to define a separate function (therefore cluttering up the global scope,) and pass the function to both $.change()and $.keyup()separately, or pass the same function declaration to each function called; Duplicating logic... Which is absolutely unacceptable.
3. If elements are ever added to the DOM, $.bind()does not dynamically bind to elements as they are created. Therefore if you bind to :inputand then add an input to the DOM, that bind method is not attached to the new input. You'd then need to explicitly un-bind and then re-bind to all elements in the DOM (otherwise you'll end up with binds being duplicated). This process would need to be repeated each time an input was added to the DOM.

1. $.live()和$.die()已弃用，并已从较新版本的 jQuery 中省略。
2. 我最好要么需要定义一个单独的函数（因此弄乱全球范围内，），并通过该函数既$.change()和$.keyup()分开，或通过相同的函数声明调用每个函数; 重复逻辑……这是绝对不能接受的。
3. 如果元素曾经添加到 DOM，$.bind()则不会在创建元素时动态绑定到元素。因此，如果您绑定到:inputDOM，然后将输入添加到 DOM，则该绑定方法不会附加到新输入。然后，您需要显式取消绑定，然后重新绑定到 DOM 中的所有元素（否则最终会重复绑定）。每次将输入添加到 DOM 时，都需要重复此过程。

回答by brenjt

Do this.

做这个。

$(function(){
    var myFunction = function()
    {
        alert("myFunction called");
    }

    jQuery(':input').change(myFunction).keyup(myFunction);
});

回答by Darin Dimitrov

You could subscribe for the change and keyup events:

您可以订阅 change 和 keyup 事件：

$(function() {
    $(':input').change(myFunction).keyup(myFunction);
});

where myFunctionis the function you would like executed:

myFunction你想执行的函数在哪里：

function myFunction() {
    alert( 'something happened!' );
}

回答by Alex Turpin

That's not how events work. Instead, you give them a function to be called when they happen.

这不是事件的运作方式。相反，你给它们一个函数，当它们发生时被调用。

$("input").change(function() {
    alert("Something happened!");
});

回答by StuperUser

Write a single function and call it for both of them.

编写一个函数并为它们调用它。

function yourHandler(e){
    alert( 'something happened!' );        
}
jQuery(':input').change(yourHandler).keyup(yourHandler);

The change() and keyup() event registration functions return the original set, so they can be chained.

change() 和 keyup() 事件注册函数返回原始集合，因此可以链接它们。

回答by Developer

keyup event input jquery

keyup 事件输入 jquery

For Demo

演示用

$(document).ready(function(){  
    $("#tutsmake").keydown(function(){  
        $("#tutsmake").css("background-color", "green");  
    });  
    $("#tutsmake").keyup(function(){  
        $("#tutsmake").css("background-color", "yellow");  
    });  
}); 

<!DOCTYPE html>  
<html>  
<title> jQuery keyup Event Example </title>
<head>  
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>  
<body>  
Fill the Input Box: <input type="text" id="tutsmake">  
</body>  
</html>