Sử dụng jQuery để xóa và thêm lớp vào nút, lớp mới được thêm sẽ không hoạt động với chức năng nhấp chuột

Question

Tôi có 2 nút, nhấp vào một nút sẽ trao đổi lớp cho cả hai nút.
Các lớp học là selected và unselected.

My CodePen:
http://codepen.io/leongaban/pen/iLBvs

Ví dụ: nhấn vào nút Login sẽ loại bỏ nó là môn học không được chọn và cung cấp cho nó lớp chọn của mình và cung cấp cho các nút Register lớp được chọn của nó.

Bây giờ vấn đề là lớp register_unselected không hoạt động. Các lớp học unselected là những lớp có nhấp vào các hành động trong jQuery của tôi.

Tôi có thể tiếp tục nhấp vào nút màu xám và chuyển sang màu xanh lam. Tuy nhiên sau khi nhấp vào nút màu xám đầu tiên (đăng nhập), thanh ghi nút màu xám mới không hoạt động.

Sử dụng trình kiểm tra của Chrome Tôi có thể thấy rõ rằng lớp register_unselected của tôi đã được thêm vào, nhưng chức năng nhấp chuột không hoạt động.

Bất kỳ ý tưởng nào? Làm thế nào bạn sẽ tiếp cận này?

// Login Tab (default : first) 
$(".login_unselected").click(function(){ 

    console.log('clicked login'); 

    // Show Login Tab as selected 
    $(this) 
    .removeClass('login_unselected') 
    .addClass('login_selected'); 

    // Show Register Tab as unselected 
    $(this).parent().find('#tab_register') 
    .removeClass('register_selected') 
    .addClass('register_unselected'); 

}); 

// Register Tab 
$(".register_unselected").click(function(){ 

    console.log('clicked register'); 

    // Show Login Tab as selected 
    $(this) 
    .removeClass('register_unselected') 
    .addClass('register_selected'); 

    // Show Register Tab as unselected 
    $(this).parent().find('#tab_login') 
    .removeClass('login_selected') 
    .addClass('login_unselected'); 

}); 

Answer 1

Khi bạn gọi $(".register_unselected").click() jQuery thực sự tìm kiếm DOM cho bất kỳ yếu tố phù hợp với .register_unselected và sau đó lắng nghe cho các sự kiện nhấp chuột vào chúng. Vì phần tử của bạn sẽ không tồn tại cho đến sau khi phương thức này được gọi, điều này sẽ không có hiệu lực.

Thay vào đó, hãy sử dụng $("body").on("click", ".register_unselected", function(){});

Bạn cũng có thể thay thế body bằng một bộ chọn khác sẽ luôn chứa các lớp thay đổi phần tử.

EDIT: Dưới đây là một CodePen chia hai: http://codepen.io/anon/pen/DqFuL

Answer 2

Khi bạn gán bộ xử lý nhấp chuột dựa trên lớp, các trình xử lý được thiết lập trên các nút phù hợp với lớp học mà lúc bấy giờ. Họ sẽ không thay đổi chỉ vì bạn đã thay đổi các lớp học. Bạn cần triển khai trình xử lý nhấp chuột để phát hiện các lớp nào được đặt vào thời gian nhấp và hành động tương ứng.

Answer 3

Sử dụng .on() để ủy quyền các sự kiện nhấp chuột từ phần tử dom tĩnh và chứa cả hai.

Vì vậy, nếu lúc tải trang, bạn có:

<ul id="container"> 
    <li class="login_selected">Login</li> 
    <li class="register_unselected">Register</li> 
</ul> 

Sau đó, thay vì sử dụng.bấm(), làm điều này:

$('#container').on('click', '.login_unselected', function(){ 
    //do stuff 
}); 

và

$('#container').on('click', '.register_unselected', function(){ 
    //do stuff 
}); 

Answer 4

Bạn cũng có thể làm được điều này

// Login Tab (default : first) 
$(".login_unselected").click(function(){ 

    console.log('clicked login'); 

    // Show Login Tab as selected 
    $(this) 
    .removeClass('login_unselected') 
    .addClass('login_selected'); 

    // Show Register Tab as unselected 
    $(this).parent().find('#tab_register') 
    .removeClass('register_selected') 
    .addClass('register_unselected'); 

}); 
// Register Tab 

$("#tab_register").click(function(){ 

    console.log('clicked register'); 
    if($(this).hasClass("register_unselected")){ 
    // Show Login Tab as selected 
    $(this) 
    .removeClass('register_unselected') 
    .addClass('register_selected'); 

    // Show Register Tab as unselected 
    $(this).parent().find('#tab_login') 
    .removeClass('login_selected') 
    .addClass('login_unselected'); 
    } 
}); 

Nghe ID và sau đó kiểm tra là nó là môn học này.

.on nhanh

[http://www.jsperf.com/change-class-on-click] 

Answer 5

ai đã đưa ra giải pháp rõ ràng hơn và thanh lịch.

Cho phép dọn dẹp CSS một chút:

//instead of .login_unselected, .registerunselected 
.target { 
     color: #ccc; 
     background: #666; 
     cursor: pointer; 
} 

//instead of .x_selected, .y_selected 
.selected { 
     color: #fff; 
     background: #3399cc; 
     text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); 
} 

Vì vậy, HTML tại là

<ul> 
    <li id="tab_login" class="target">Login</li> 
    <li id="tab_register" class="target">Register</li> 
</ul> 

Các jQuery là:

$("ul").on("click", ".target", function(){ 

     // Remove selected class from any that have it 
     $(".target").removeClass('selected'); 
     // Add class to the one you're clicking on 
     $(this).addClass('selected'); 

}); 

Thay vì gọi lớp .target bạn có thể gọi nó là .unselected. Từ ngữ cảnh của câu hỏi của bạn có khả năng là bạn không cần hai lớp riêng biệt, các lớp học được tạo ra để được áp dụng cho nhiều phần tử và nếu bạn cần tham chiếu chúng riêng lẻ, bạn đã có sẵn id s.

Cũng nên nhớ, bạn có thể áp dụng nhiều lớp cho một phần tử và sau đó ghi đè kiểu từ một lớp bằng cách chỉ định các giá trị thuộc tính khác nhau trên lớp cuối cùng. Bất kỳ lớp nào được áp dụng cuối cùng sẽ ghi đè lên các thiết lập của bất kỳ lớp nào đã được áp dụng cho nó, trừ khi các giá trị cho thuộc tính bạn muốn ghi đè chưa được chỉ định trong lớp ghi đè.