键控 jquery 上的多个类

Question

我有一个函数，我想在keyup上执行 2 种不同的class textfields。当只有一个类分配给keyup时，下面的代码运行良好，但是当我添加第二个类时class它可以工作，但有很多滞后。任何一个class本身都可以正常工作，因此我认为我不正确地将第二个class添加到事件处理程序中。代码为：

$(document).ready(function(){
    $(".class1").each(function() {
        //!!!!!!! .class2 here adds lag !!!!!!!!!!
        $('.class1,.class2').keyup(function(){
            myFunction1();
        });
    });
    $(".class2").each(function() {
        $(this).keyup(function(){
            myFunction2();
        });
    });
});

Answer 1

看来您连接了太多事件 - 因此滞后。您也不需要 .each，用于迭代每个元素。尝试简化如下：

$(document).ready(function(){
    $('.class1,.class2').keyup(function(){
        myFunction1();
        if ($(this).hasClass('class2')) {
            myFunction2();
        }
    });
});

Answer 2

或者，

您可以添加两个单独的事件并调用函数。 它与另一个答案相似，可能只是取决于风格。

演示：http://jsfiddle.net/lucuma/wzEJc/

示例代码：

function myFunction1(el) {
    el.addClass('mclass1');
};
function myFunction2(el) {
    el.addClass('mclass2');
};

$(document).ready(function(){
    $('.class1').keyup(function(){
        myFunction1($(this));    
    });
    $('.class2').keyup(function(){
        myFunction1($(this));
        myFunction2($(this));    
    });
});​

Answer 3

你绑定了相当多的事件处理程序，你可以让事件冒泡并在以后捕获它：

 $('body').on('keyup', '.class1, .class2', myFunction1);
 $('body').on('keyup', '.class2', myFunction2);