Hàm .click() thứ hai không hoạt động

Question

Hàm đầu tiên .click được sử dụng để thêm phần tử (div) vào vùng chứa và phần tử thứ hai được sử dụng để xóa nó khỏi vùng chứa. Vùng chứa ban đầu không có phần tử. Việc xóa chức năng bằng cách nhấp vào nó không hoạt động

$(document).ready(function(){ 
    $(".class1").click(function(){ 
     //Code for adding element to the container and 
     // removing class1 from it and adding class2 

    }); 

    $(".class2").click(function(){ 
     alert("hi"); //Even the alert is not displayed 
     $(this).fadeOut(100);  
    }); 
}); 

Tuy nhiên, nó hoạt động nếu phần tử đã có trước khi tải trang trong vùng chứa. Bất kỳ lý do gì? Có phải vì hàm document.ready không? Các giải pháp?

Answer 1

Đó là bởi vì khi bạn đang thêm handler nhấp chuột cho .class2 yếu tố, bạn chỉ thêm sự kiện vào các yếu tố có lớp đó tại thời điểm cụ thể đó trong thời gian; ví dụ: không.

Thay vào đó, bạn cần sử dụng ủy quyền sự kiện như vậy;

$(document).on('click', '.class2', function() { 
    alert('hi'); 
    $(this).fadeOut(100); 
}); 

này sẽ làm việc như nó liên kết với một sự kiện để document (mà luôn luôn tồn tại), mà nghe cho nhấp chuột vào bất kỳ .class2 yếu tố sử dụng đoàn sự kiện. Để biết thêm thông tin, hãy đọc tài liệu on().

Answer 2

Khi bạn cố gắng thêm mã để nhấp vào .class2, nó chưa được tạo như tôi đã hiểu. thử thêm các sự kiện nhấp chuột, sau khi bạn tạo các yếu tố .class2 như thế này:

$(document).ready(function(){ 
    $(".class1").click(function(){ 
      //Code for adding element to the container and removing class1 from it and adding class2 

     $(".class2").click(function(){ 
      alert("hi");   //Even the alert is not displayed 
      $(this).fadeOut(100); 

     }); 
    }); 
}); 

Answer 3

sử dụng trình xử lý sự kiện ủy nhiệm cho cả hai lớp (nếu bạn chuyển đổi giữa hai lớp hoặc nếu bạn không quay lại class1 thì thứ hai là đủ) vì sau khi thay đổi class yếu tố được coi là động.

$("#container").on("click", ".class1", function(){ 

}); 

$("#container").on("click", ".class2", function(){ 

}); 

Ở đây #container là cha mẹ của lớp đó, bạn có thể có thứ khác.

Answer 4

Các sự kiện không thể truyền trên các phần tử không có ở đó khi hàm được biên soạn. Tuy nhiên, bạn có thể tạo ra một yếu tố wrapper (div) xung quanh "class1" và "class2", như thế này:

<div id="class1_wrapper"> 
    <span class="class1"> 
</div> 

tôi đã sử dụng "khoảng" cho class1, bởi vì tôi không biết yếu tố nào nó được. Sau đó, thay vì sự kiện nhấp chuột, bạn có thể sử dụng "trên()":

$("#class1_wrapper").on("click", ".class1", function() 
{ 
    //Code for adding element to the container and removing class1 from it and adding class2 
}); 

cách này, ngay cả khi class1 là không có (cùng có thể được thực hiện cho class2), sự kiện nhấp chuột sẽ chạy