keyup 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);