Mã jquery hoạt động trên bàn điều khiển nhưng không có trong thẻ tập lệnh hoặc trong tệp js đính kèm

Question

$(".filter-close").click(function(){ 
    $(this).parent().remove(); 

}); 

đoạn mã này hoạt động trong bàn điều khiển nhưng không nằm trong tệp js đính kèm.

Answer 1

chờ cho DOM để sẵn sàng khi gọi xử lý sự kiện của bạn:

jQuery(function($) { // this does the trick and also makes sure jQuery is not conflicting with another library 
    $(".filter-close").click(function(){ 
     $(this).parent().remove(); 
    }); 
}); 

^{khi sử dụng một thư viện JavaScript, chúng ta có thể muốn gọi $ .noConflict() để tránh những khó khăn namespace. Khi hàm này được gọi, phím tắt $ không còn có sẵn, buộc chúng ta phải viết jQuery mỗi khi chúng ta thường viết $. Tuy nhiên, trình xử lý được truyền cho phương thức .ready() có thể lấy một đối số, được truyền qua đối tượng jQuery toàn cầu. Điều này có nghĩa chúng ta có thể đổi tên các đối tượng trong bối cảnh xử lý của chúng tôi đã sẵn sàng() mà không ảnh hưởng mã khác}

^{Documentation for .ready() method}

Answer 2

Có thể thành phần có lớp filter-close không tồn tại trong DOM tại thời điểm bạn gọi hàm này. Tôi cho rằng bạn đang thêm các phần tử vào DOM động. Bạn có phải?

Answer 3

Có thể có vấn đề không có trong DOM khi trình xử lý sự kiện được đính kèm.

Hãy thử một cái gì đó như thế này:

$(document).ready(function() { 
    // Handler for .ready() called. 

    $(".filter-close").click(function(){ 
     $(this).parent().remove(); 

    }); 

}); 

Các $ .ready() (link bên dưới) đảm bảo rằng nó không cố gắng gọi mã để thêm xử lý trước khi DOM được trả lại, tương tự như onload.

^{Documentation for JQuery .ready() method}

Ngoài ra còn có mâu thuẫn thư viện tiềm năng (xem @ câu trả lời D4V1D ví dụ về điều đó), nhưng chúng tôi không thể nói chắc chắn mà không biết nhắn gì lỗi xuất hiện trong giao diện điều khiển (nếu có) và lý tưởng thêm về mã xung quanh.

Vui lòng nhấn F12 và xem nội dung đang được in trong bảng điều khiển và/hoặc bảng điều khiển mạng hoặc google "Bảng điều khiển dành cho trình duyệt dev của trình duyệt" nếu F12 không làm gì cả.

Nhưng, như đã nói nó hoạt động trong giao diện điều khiển, do đó, tôi giả sử bạn có nghĩa là dev console và rằng nó là trong thực tế chỉ là một vấn đề thời gian, vì vậy khó có một cuộc xung đột (mặc dù lỗi vẫn có thể cú pháp ở một nơi khác trên trang)