3

我有一个表格：

  • 两个输入文本字段
  • 4选
  • 1 个文本区域

有没有一种简单的方法来捕获以下事件？

当用户在输入字段中键入内容、从列表中选择内容或在文本区域中键入内容时？

还是我必须以旧的方式来做，比如：为选择做一个改变功能，为输入做焦点等等？

基本上，我希望能够知道表单上的某些内容何时发生变化。

有任何想法吗？

这是一个更新：

假设我使用以下代码：

$('input, textarea, select').on('change', function() {
    console.log('hey');

    // how do I unbind this certain even after the first "hey" listing of the console?

});

即使在控制台第一次列出之后，我如何解除绑定？

4

6 回答 6

3

要查找input元素何时更改，我们可以简单地执行以下操作：

$('input').change(function(){
    console.log('Something has changed');
});

这将捕获页面上所有input元素上的所有事件，但在您的情况下，我们有以下内容：

  • 两个输入文本字段
  • 4选
  • 1 个文本区域

选择input器不会匹配所有这些。但是，不要惊慌！我们仍然可以做到这一点。聪明的一点是，在 DOM 中，所有祖先元素都会收到在其祖先上发生的事件的通知。例如，单击 aspan内部的 adiv将通知两个元素单击已发生。

所以在这种情况下，我们只需要找到一个包含所有这些元素的共同祖先元素，并在其上捕获事件。显而易见的使用是form：

$('form').change(function(){
    console.log('Something has changed');
});

然而，这可能不是我们能做的最好的。例如，最好有一种快速访问已更改元素的方法。如果我们能确保没有其他元素可以触发该功能，那也很好。jQuery 通过该on函数为我们实现了这一点。这允许我们将处理程序附加到form元素并确保原始元素与选择器匹配，然后this在函数内部为我们提供对该元素的引用。

此代码可能如下所示：

$('form').on('change', 'input, select, textarea', function() {
    console.log('Something has changed in an element called ' + this.name;
});

您的编辑表明您希望能够在某个时候禁用处理程序。

有两种方法可以做到这一点。第一个简单粗暴：

$('form').off('change');

将不再捕获更多change事件form。但是，如果要重新启用它，则必须经历重新绑定事件处理程序的整个过程。另一种选择是有一个变量来告诉您是否应该启用事件处理程序：

var enabled = true;
$('form').on('change', 'input, select, textarea', function() {
    if (enabled) {
        console.log('Something has changed in an element called ' + this.name;
    }
});

然后，您可以通过设置enabled来禁用处理程序false，并通过再次设置来重新启用它true。

于 2013-11-07T19:58:20.990 回答
2

你可以使用：

$('input, textarea, select').on('change', function() {
     alert('something\'s changed!');
});

其中“输入”是您的每个输入元素（或您要跟踪的元素共享的类名）

于 2013-11-07T19:54:10.043 回答
1

利用

$("#myform *:input").change(function(){
    // do stuff here!
});

将更改添加到#myform.

补充：至于解绑，使用：

$('#myform *:input').on('change', function() {
    console.log('hey');

    $('#myform *:input').off('change', arguments.callee);

});

真正容易

于 2013-11-07T19:56:01.460 回答
1

这对你有用吗？

$(":input").change(function(){ ... });
于 2013-11-07T19:56:01.280 回答
0

Assign data on focus, check data on blur:

$('#FormName').on({
    focus:function(){
        $(this).data('curval',$(this).val());
    },
    blur:function(){
        if($(this).val() !== $(this).data('curval')){
            alert('changed!');
        }
    }
},'input,select,textarea');

This should be pretty universal, and performant with the delegation.

于 2013-11-07T19:55:33.137 回答
0

是的：

//For a dropdown list/select
$( "#select" ).change(function() {
    dostuff
});

//For a textbox AS the user enters keystrokes (as opposed to on end of focus)
$( "#text" ).on('input', function() {
    dostuff
});
于 2013-11-07T19:56:29.910 回答