jquery - keyup jquery上的多个类

Question

我有一个函数，我想对keyup2 个不同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);