jQuery '如果 .change() 或 .keyup()'答案

【问题标题】：jQuery 'if .change() or .keyup()'jQuery '如果 .change() 或 .keyup()'
【发布时间】：2011-12-07 02:56:42
【问题描述】：

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

类似的东西。

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

编辑

对不起，我忘了提。 .change() 和 .keyup() 都需要一些变量在范围内。

【问题讨论】：

事件不是“活跃的”，它们是被引发的。
need some of the variables to be in-scope 您是指事件中的变量还是您在注册这些事件处理程序时使用的变量？您在事件参数中获取事件变量（通常命名为e），否则您可能需要将它们保持在窗口级别或元素上的数据，直到引发事件，或者查看闭包。

标签： javascript jquery function

【解决方案1】：

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

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

文档here.

希望对您有所帮助。干杯！

【讨论】：

请注意，如果 keyup 上的值发生变化，内部函数会被调用两次（因此，几乎总是如此）。请参阅@Joshua Burns 回复来处理它。
但它执行了 2 次，一次用于“keyup”，一次用于“更改”...为什么？
应该使用 .on() 而不是 .bind()

【解决方案2】：

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

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

代码：

// 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!');
});

请注意！我使用$.on() 和$.off() 而不是其他方法有几个原因：

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

【讨论】：

第二行是做什么的？
@VarunDas, var bind_to = ':input'; 创建一个名为bind_to 的变量，它是一个选择器，用于获取所有输入类型，例如input、textarea 和button。
如果我想要特定元素：var bind_to = '#myInput'; ajax 调用无论如何都会执行两次。为什么？？？
@Pathros 我需要看一个例子，这个线程不是地方。在 LinkedIn 或其他地方给我发消息

【解决方案3】：

这样做。

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

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

【讨论】：

change() 和 keyup() 返回包装好的集合，所以你可以链接它。
你可以，不是吗。谢谢。
链也消除了通过DOM的第二次查询。

【解决方案4】：

您可以订阅 change 和 keyup 事件：

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

myFunction 是你想要执行的函数：

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

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

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

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

【讨论】：

【解决方案7】：

这就是我使用 Jquery 解决它的方法

$("#c_debit").on("keyup change", function(e) {
 let debitValue = $("#c_debit").val();
 if(debitValue != 0)
 {
  $( "#c_credit" ).prop( "disabled", true );
 }
 else{
  $( "#c_credit" ).prop( "disabled", false );
 }
})

【讨论】：

【解决方案8】：

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>

【讨论】：

欣赏这个奇异的例子，即使 OP 正在寻找一个组合的 keyup 和 change 解决方案......