Gọi cùng chức năng jQuery cả vào tải và trên nhấp chuột

Question

Trong "cập nhật" của tôi trang tôi thường có nhu cầu gọi cùng chức năng jQuery cả trên tải trang và nhấp chuột của một số hộp kiểm, chủ yếu là như thế này:

function foo(){ 
    if ($('#mycheckbox').is(':checked')){ 
     $('.myclass').hide(); 
    } else { 
     $('.myclass').show(); 
    } 
} 

$(function() { 

    foo(); // this is launched on load 
    $('#mycheckbox').click(function(){ 
     foo(); // this is launched on checkbox click 
    }) 

}); 

Khi tải trang, hộp kiểm có thể được kiểm tra hoặc không phụ thuộc vào giá trị cơ sở dữ liệu: đó là lý do tại sao tôi có nhu cầu khởi chạy foo(); trên tải

Vâng, điều này hoạt động tốt, nhưng tôi luôn tự hỏi nếu ... có một giải pháp tốt hơn hoặc thanh lịch nhất? Cảm ơn trước

Answer 1

Một cách để làm điều đó (giả sử trang web của bạn chứa thành phần mã phía máy chủ) sẽ ẩn/hiển thị mục trong hiển thị phía máy chủ, nếu phù hợp. Điều này có nghĩa là không có màn hình 'nhấp nháy' (tuy nhiên là nhẹ) khi tải trang.

Answer 2

Bạn có thể sử dụng chức năng trigger() để kích hoạt sự kiện ngay lập tức;

$('#mycheckbox').click(function(){ 
    if ($('#mycheckbox').is(':checked')){ 
     $('.myclass').hide(); 
    } else { 
     $('.myclass').show(); 
    } 
}).trigger('click'); 

Tuy nhiên, hãy nhớ rằng điều này cũng sẽ kích hoạt bất kỳ trình xử lý nhấp chuột nào khác mà bạn đã xác định trên phần tử.

Cách khác, bạn có thể viết một plugin jQuery nhỏ để làm điều đó cho bạn;

jQuery.fn.nowAndOn = function (event, handler) { 
    handler(); 

    this.bind(event, handler); 

    return this; // support chaining 
}; 

Và bạn sẽ sử dụng nó như;

$(function() { 
    $('#mycheckbox').nowAndOn('click', function(){ 
     if ($('#mycheckbox').is(':checked')){ 
      $('.myclass').hide(); 
     } else { 
      $('.myclass').show(); 
     } 
    }); 
}); 

Tuy nhiên, vấn đề với điều này là bên trong trình xử lý nhấp, this thường là phần tử hiện tại; trong khi bằng cách gọi handler(); như chúng tôi làm ở đây, this sẽ trỏ đến window thay vào đó (điều này không có liên quan đến đoạn trích chính xác mà bạn đã đăng, vì bạn không sử dụng this).

Để sửa lỗi this, chúng tôi có thể thêm một số phức tạp và sử dụng phương pháp Function.call để đặt giá trị this;

jQuery.fn.nowAndOn = function (event, handler) { 
    this.each(function() { 
     handler.call(this); 
    }); 

    this.bind(event, handler); 

    return this; 
}; 

Tuy nhiên, bạn vẫn sẽ có một vấn đề nếu bạn dựa vào một đối tượng tổ chức sự kiện được thông qua ...

Answer 3

bạn có thể tránh được những chức năng cuộc gọi thứ hai và ràng buộc chức năng foo trực tiếp đến việc xử lý nhấp chuột:

function foo(){ 
    if ($('#mycheckbox').is(':checked')){ 
     $('.myclass').hide(); 
    } else { 
     $('.myclass').show(); 
    } 
} 

$(function() { 
    foo(); // this is launched on load 
    $('#mycheckbox').click(foo) 

}); 

Answer 4

Điều tốt nhất bạn có thể làm là thế này:

$(function() { 

    foo(); // this is launched on load 
    $('#mycheckbox').click(function(){ 
     foo(); // this is launched on checkbox click 
    }) 

}); 

->

$(function() { 
    foo(); // this is launched on load 
    $('#mycheckbox').click(foo); 

}); 

Answer 5

Điều duy nhất bạn có thể làm là nên gọi foo() như thế này:

$('#mycheckbox').click(foo); 

Answer 6

Hãy thử điều này

$('#mycheckbox').click(function(){ 
    $(this).is(':checked')?$('.myclass').hide():$('.myclass').show(); 
}).click(); 

Answer 7

Tôi biết câu hỏi này đã được trả lời trước nhưng đây là một khác đẹp cách hoàn thành vấn đề của OP, đặc biệt là với các hộp kiểm trong tâm trí, khi kích hoạt sự kiện nhấp chuột trên một yếu tố khiến hộp kiểm vô tình được chọn/bỏ chọn:

$('#myCheckbox').bind('click init', function() { 
    $('.myDiv').toggle($('#myCheckbox').is(':checked')); 
}).trigger('init'); 

Phương pháp này cũng tránh tuyên truyền sự kiện nhấp chuột.