Tại sao hàm nhấp chuột jQuery này không hoạt động?

116

Mã:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $("#clicker").click(function () {
        alert("Hello!");
        $(".hide_div").hide();
    });
</script>

Đoạn mã trên không hoạt động. Khi tôi nhấp vào #clicker, nó không cảnh báo và cũng không ẩn. Tôi đã kiểm tra bảng điều khiển và tôi không gặp lỗi. Tôi cũng đã kiểm tra xem JQuery có đang tải hay không và thực sự là như vậy. Vì vậy, không chắc chắn vấn đề là gì. Tôi cũng đã thực hiện chức năng sẵn sàng tài liệu với cảnh báo và điều đó hoạt động nên tôi không chắc mình đang làm sai điều gì. Xin vui lòng giúp đỡ. Cảm ơn!

— starbucks
nguồn

3

Wrap mã trong document.ready

— karthikr

1

Bạn đã kiểm tra bảng điều khiển của trình duyệt nếu có bất kỳ lỗi nào, cú pháp hoặc tệp không được tìm thấy hay điều gì khác không?

— Siddharth Pandey

1

Có thể có bản sao của Tại sao jQuery hoặc một phương thức DOM như getElementById không tìm thấy phần tử?

— user4642212

179

Bạn phải thêm mã javascript vào một $(document).ready(function() {});khối.

I E

$(document).ready(function() {
  $("#clicker").click(function () {
    alert("Hello!");
    $(".hide_div").hide();
  });
});

Như tài liệu jQuery nêu rõ: "Không thể thao tác trang một cách an toàn cho đến khi tài liệu" sẵn sàng ". JQuery phát hiện trạng thái sẵn sàng này cho bạn. Mã bao gồm bên trong $( document ).ready()sẽ chỉ chạy khi trang Mô hình đối tượng tài liệu (DOM) sẵn sàng cho JavaScript mã để thực thi "

— mobius
nguồn

7

Cách ngu ngốc của tôi!! Vẫn đang học. Tôi nghĩ rằng tôi không cần chức năng nhấp chuột vì nó được kích hoạt khi nhấp vào so với tài liệu. Đã ở nơi nó tải khi tải trang.

— starbucks

7

@starbucks Đừng lo lắng về nó quá nhiều, tất cả mọi người làm cho những sai lầm, và đặc biệt là khi học :)

— Mobius

4

Chức năng sẵn sàng tài liệu thiết lập trình nghe dựa trên những gì nó tìm thấy trên trang. Nếu bạn không làm điều này, chúng sẽ không bao giờ được thiết lập. Tuy nhiên, cách tốt nhất để làm điều này là ủy quyền chúng bằng hàm "on ()". Bằng cách đó, bất kỳ phần tử nào được thêm vào trang sau khi tải sẽ vẫn hoạt động!

— Sean Kendle

1

Ngoài ra, với chức năng "bật", bạn thực sự không cần sử dụng chức năng sẵn sàng tài liệu. Nó đặt người nghe ở mức tài liệu, và sau đó quét trang cho các phần tử để nghe. Đó là lý do tại sao sẽ nhanh hơn một chút khi cụ thể hơn một chút về loại phần tử bạn muốn nghe, chẳng hạn như "div.listentome" thay vì ".listentome". Thay vì kiểm tra mọi phần tử cho lớp "listentome", nó chỉ kiểm tra các div, trong ví dụ này.

— Sean Kendle

2

@SeanKendle - Đó không phải là cách .on()hoạt động. Bạn có thể (tùy chọn) sử dụng nó để tạo các trình xử lý được ủy quyền, nhưng theo cách nào thì nó không "quét trang", nó liên kết một trình lắng nghe với (các) phần tử cụ thể trong đối tượng jQuery mà bạn gọi nó.

— nnnnnn

65

Tôi đã tìm thấy giải pháp tốt nhất cho vấn đề này bằng cách sử dụng ON với $ (tài liệu).

 $(document).on('click', '#yourid', function() { alert("hello"); });

cho id bắt đầu với xem bên dưới:

$(document).on('click', 'div[id^="start"]', function() {
alert ('hello'); });

cuối cùng sau 1 tuần tôi không cần thêm onclick triger. Tôi hy vọng điều này sẽ giúp được nhiều người

— người dùng5636597
nguồn

2

Ah, cảm ơn, phần trên không hiệu quả với tôi, nhưng điều này đã làm được! (có thể là một số tương tác kỳ lạ với góc cạnh và định tuyến)

— Flink

Cũng giống như Flink, tôi cũng đã giải quyết vấn đề này. Cảm ơn .. 100 ủng hộ ..

— Zeta

3

Nó được gọi là phái đoàn và là cần thiết cho động chèn hoặc di chuyển nội dung

— mplungjan

Điều này đã làm việc cho tôi! Cảm ơn :)

— Amrit Pal Singh

20

Mã của bạn có thể hoạt động mà không cần document.ready () chỉ cần đảm bảo rằng tập lệnh của bạn nằm sau #clicker. Kiểm tra bản trình diễn này: http://jsbin.com/aPAsaZo/1/

Ý tưởng trong khái niệm sẵn sàng. Nếu bạn chắc chắn rằng tập lệnh của bạn là thứ mới nhất trong trang của bạn hoặc nó nằm sau phần tử bị ảnh hưởng, thì nó sẽ hoạt động.

<!DOCTYPE html>
<html>
<head>


<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <script src="https://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
  <a href="#" id="clicker" value="Click Me!" >Click Me</a>
  <script type="text/javascript">

        $("#clicker").click(function () {
            alert("Hello!");
            $(".hide_div").hide();

        });


</script>

</body>
</html>

Chú ý: Trongjsbindemo thay thế httpbằng httpscó trong mã hoặc sử dụng Demo biến thể này

— SaidbakR
nguồn

11

+1 - Câu trả lời của bạn giải thích lý do tại sao một người cần document.ready()chức năng.

— Kevin

1

Đây là một câu trả lời tốt hơn vì gợi ý rằng tập lệnh jquery phải nằm trong một hàm 'document.ready ()' là sai. Có, ở đó an toàn hơn, nhưng nếu bạn thiết lập phần tử html cho một hàm jquery ngay lập tức (chẳng hạn như truy vấn một hàng trong bảng tùy thuộc vào nút nào được nhấp), nó cần phải nằm ngoài / sau hàm đó. Tôi đã nhầm lẫn tên của div đích cho lớp phủ bật lên của mình và sau đó đã dành vài giờ bực bội để tìm kiếm lỗi tập lệnh. Bài học kinh nghiệm lớn.

— johnlholden

Đây là một câu trả lời sai, vì mã JS phải nằm trong phần đầu của DOM và không nằm trong dòng. Việc bạn dành vài giờ để tìm lỗi script không phải là vấn đề của JS, mà là vấn đề của bạn khi không đọc tài liệu đúng cách và không biết cách sử dụng các công cụ gỡ lỗi.

— Andrey Shipilov

@AndreyShipilov Ai đã nói vậy, chỉ cần nhìn vào nguồn của trang này và đi xuống cuối trang, bạn sẽ thấy mã javascript ở đó.

— SaidbakR

1

@AndreyShipilov - bạn có biết cách sử dụng các công cụ gỡ lỗi để khắc phục sự cố này không? Sau đó, hãy chia sẻ kiến thức của bạn với người khác thay vì xúc phạm họ. Cố gắng mang tính xây dựng và công bằng.

— Matt

6

Bạn phải bao bọc mã Javascript của mình bằng $(document).ready(function(){});Look this JSfiddle .

Mã JS:

$(document).ready(function() {

    $("#clicker").click(function () {
        alert("Hello!");
        $(".hide_div").hide();    
    });
});

— Cừu đen
nguồn

5

Hãy thử thêm $(document).ready(function(){vào đầu tập lệnh của bạn và sau đó });. Ngoài ra, divcó id trong đó đúng không, tức là, như một id, không phải là một lớp, v.v.?

— tjons
nguồn

3

Hãy chắc chắn rằng không có gì trên nút của bạn (ví dụ như div hoặc img trasparent) ngăn không cho nhấp vào nút. Nghe có vẻ ngu ngốc, nhưng đôi khi chúng ta nghĩ rằng jQuery không hoạt động và tất cả những thứ đó sẽ gây ra sự cố và vấn đề là ở vị trí của các phần tử DOM.

— vicgilbcn
nguồn

hoặc, ví dụ, z-index!

— a darren

3

Bạn có thể sử dụng $(function(){ // code });được thực thi khi tài liệu đã sẵn sàng để thực thi mã bên trong khối đó.

$(function(){
    $('#clicker').click(function(){
        alert('hey');
        $('.hide_div').hide();
    });
});

— Rakyesh Kadadas
nguồn

2

Chỉ cần kiểm tra nhanh, nếu bạn đang sử dụng công cụ tạo khuôn mẫu phía máy khách chẳng hạn như thanh điều khiển, js của bạn sẽ tải sau khi tài liệu. và kiểm tra mục tiêu hiện tại

— Abhinav Singh
nguồn

đó là sự thật, tôi đang sử dụng bình / jinja và nó không làm việc trừ khi tôi sử dụng thuộc tính onclick trong HTML và tham khảo từ đó đến một hàm trong tôi <script>

— Giàu Đá