เหตุใดฟังก์ชั่นคลิก jQuery นี้จึงไม่ทำงาน

116

รหัส:

<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>

โค้ดด้านบนใช้ไม่ได้ เมื่อฉันคลิกที่ #clicker มันจะไม่แจ้งเตือนและไม่ได้ซ่อน ฉันตรวจสอบคอนโซลแล้วและไม่พบข้อผิดพลาด ฉันยังตรวจสอบเพื่อดูว่า JQuery กำลังโหลดหรือไม่และเป็นจริง เลยไม่แน่ใจว่าเป็นประเด็นอะไร ฉันยังใช้ฟังก์ชั่นพร้อมเอกสารพร้อมการแจ้งเตือนและได้ผลดังนั้นจึงไม่แน่ใจว่าฉันทำอะไรผิด กรุณาช่วย. ขอบคุณ!

— Starbucks
แหล่งที่มา

3

ตัดรหัสใน document.ready

— karthikr

1

คุณได้ตรวจสอบคอนโซลของเบราว์เซอร์หรือไม่ว่ามีข้อผิดพลาดไม่พบไวยากรณ์หรือไฟล์หรืออย่างอื่น?

— Siddharth Pandey

1

อาจซ้ำกันได้ทำไม jQuery หรือเมธอด DOM เช่น getElementById ไม่พบองค์ประกอบ

— user4642212

180

คุณควรจะเพิ่มโค้ดจาวาสคริปต์ใน$(document).ready(function() {});บล็อก

กล่าวคือ

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

ตามสถานะเอกสาร jQuery : "ไม่สามารถจัดการเพจได้อย่างปลอดภัยจนกว่าเอกสารจะ" พร้อม "jQuery ตรวจพบสถานะความพร้อมสำหรับคุณโค้ดที่รวมอยู่ภายใน$( document ).ready()จะทำงานเมื่อหน้า Document Object Model (DOM) พร้อมสำหรับ JavaScript เท่านั้น รหัสเพื่อดำเนินการ "

— Mobius
แหล่งที่มา

7

ฉันโง่แค่ไหน !! ยังคงเรียนรู้. ฉันคิดว่าฉันไม่ต้องการฟังก์ชั่นการคลิกเนื่องจากเปิดใช้งานเมื่อคลิกเทียบกับเอกสารแล้วโหลดที่ไหนเมื่อโหลดหน้า

— starbucks

7

@starbucks อย่ากังวลกับเรื่องนี้มากนักทุกคนทำผิดพลาดและโดยเฉพาะอย่างยิ่งเมื่อเรียนรู้ :)

— mobius

4

ฟังก์ชันพร้อมเอกสารตั้งค่าผู้ฟังตามสิ่งที่พบในหน้า หากคุณไม่ทำเช่นนี้แสดงว่าไม่มีการตั้งค่า อย่างไรก็ตามวิธีที่ดีที่สุดคือมอบหมายให้พวกเขาใช้ฟังก์ชัน "on ()" แทน ด้วยวิธีนี้องค์ประกอบใด ๆ ที่เพิ่มลงในหน้าหลังจากโหลดจะยังคงใช้งานได้!

— Sean Kendle

1

นอกจากนี้ด้วยฟังก์ชัน "เปิด" คุณไม่จำเป็นต้องใช้ฟังก์ชันพร้อมเอกสาร ตั้งค่าผู้ฟังเป็นระดับเอกสารจากนั้นคัดลอกหน้าสำหรับองค์ประกอบที่จะฟัง นั่นเป็นเหตุผลว่าทำไมการระบุประเภทองค์ประกอบที่คุณต้องการฟังจะเร็วขึ้นเล็กน้อยเช่น "div.listentome" ตรงข้ามกับ ".listentome" แทนที่จะตรวจสอบทุกองค์ประกอบสำหรับคลาส "listentome" จะตรวจสอบเฉพาะ div เท่านั้นในตัวอย่างนี้

— Sean Kendle

2

@SeanKendle - นั่นไม่ใช่วิธีการ.on()ทำงาน คุณสามารถ (เป็นทางเลือก) ใช้เพื่อสร้างตัวจัดการที่ได้รับมอบหมาย แต่ไม่ว่าจะด้วยวิธีใดก็ตามมันจะไม่ "ขูดหน้า" มันจะเชื่อมโยงผู้ฟังกับองค์ประกอบเฉพาะในวัตถุ jQuery ที่คุณเรียกมัน

— nnnnnn

65

ฉันพบทางออกที่ดีที่สุดสำหรับปัญหานี้โดยใช้ ON กับ $ (document)

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

สำหรับ id เริ่มต้นด้วยดูด้านล่าง:

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

ในที่สุดหลังจาก 1 สัปดาห์ฉันไม่จำเป็นต้องเพิ่ม onclick triger ฉันหวังว่านี่จะช่วยหลาย ๆ คนได้

— user5636597
แหล่งที่มา

2

อาขอบคุณข้างต้นไม่ได้ผลสำหรับฉัน แต่สิ่งนี้ทำได้! (อาจมีปฏิสัมพันธ์แปลก ๆ กับเชิงมุมและการกำหนดเส้นทาง)

— Flink

เช่นเดียวกับ Flink ฉันยังแก้ปัญหานี้ด้วย ขอบคุณ .. 100 upvote ..

— Zeta

3

เรียกว่าการมอบหมายและจำเป็นสำหรับการแทรกหรือย้ายเนื้อหาแบบไดนามิก

— mplungjan

อันนี้ใช้ได้ผลสำหรับฉัน! ขอบคุณ :)

— Amrit Pal Singh

20

รหัสของคุณอาจทำงานได้โดยไม่มี document.ready () ตรวจสอบให้แน่ใจว่าสคริปต์ของคุณอยู่หลัง #clicker ชำระเงินการสาธิตนี้: http://jsbin.com/aPAsaZo/1/

แนวคิดในแนวคิดสำเร็จรูป หากคุณแน่ใจว่าสคริปต์ของคุณเป็นสิ่งล่าสุดในเพจของคุณหรืออยู่หลังจากองค์ประกอบที่ได้รับผลกระทบก็จะใช้งานได้

<!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>

ข้อสังเกต: ในjsbinการสาธิตแทนที่httpด้วยhttpsรหัสนั้นหรือใช้การสาธิตตัวแปรนี้

— SaidbakR
แหล่งที่มา

11

+1 - คำตอบของคุณอธิบายว่าเหตุใดจึงต้องการdocument.ready()ฟังก์ชัน

— Kevin

1

นี่เป็นคำตอบที่ดีกว่าเนื่องจากคำแนะนำที่ว่าสคริปต์ jquery ต้องอยู่ในฟังก์ชัน "document.ready ()" นั้นทำให้เข้าใจผิด ใช่มันปลอดภัยกว่าที่นั่น แต่ถ้าคุณตั้งค่าองค์ประกอบ html สำหรับฟังก์ชัน jquery ได้ทันที (เช่นค้นหาแถวตารางขึ้นอยู่กับว่าปุ่มใดคลิก) จำเป็นต้องอยู่นอก / หลังจากฟังก์ชันนั้น ฉันเปลี่ยนชื่อ div เป้าหมายสำหรับการวางซ้อนป๊อปอัปของฉันโดยไม่ได้ตั้งใจจากนั้นใช้เวลาหลายชั่วโมงที่น่าหงุดหงิดในการค้นหาข้อผิดพลาดของสคริปต์ ได้เรียนรู้บทเรียนครั้งใหญ่

— johnlholden

นี่เป็นคำตอบที่ไม่ถูกต้องเนื่องจากรหัส JS ควรอยู่ในส่วนหัวของ DOM ไม่ใช่แบบอินไลน์ ความจริงที่ว่าคุณใช้เวลาหลายชั่วโมงในการค้นหาข้อผิดพลาดของสคริปต์ไม่ใช่ปัญหา JS แต่เป็นปัญหาของคุณที่อ่านเอกสารไม่ถูกต้องและไม่รู้วิธีใช้เครื่องมือดีบัก

— Andrey Shipilov

@AndreyShipilov ใครพูดแบบนั้นแค่ดูที่มาของหน้านี้แล้วลงไปด้านล่างคุณจะเห็นโค้ดจาวาสคริปต์ที่นั่น

— SaidbakR

1

@AndreyShipilov - คุณรู้วิธีใช้เครื่องมือดีบั๊กเพื่อแก้ไขปัญหานี้หรือไม่? จากนั้นโปรดแบ่งปันความรู้ของคุณกับผู้อื่นแทนที่จะทำให้พวกเขาขุ่นเคือง พยายามสร้างสรรค์และยุติธรรม

— Matt

6

คุณต้องห่อ Javascript รหัสของคุณด้วย$(document).ready(function(){});ลักษณะนี้JSfiddle

รหัส JS:

$(document).ready(function() {

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

— แกะดำ
แหล่งที่มา

5

ลองเพิ่มจุดเริ่มต้นของสคริปต์ของคุณแล้ว$(document).ready(function(){ });นอกจากนี้ยังdivมี id ที่ถูกต้องเช่นเป็น id ไม่ใช่คลาส ฯลฯ ?

— tjons
แหล่งที่มา

3

ตรวจสอบให้แน่ใจว่าไม่มีสิ่งใดบนปุ่มของคุณ (เช่น div หรือ img trasparent) ที่ไม่ให้คลิกปุ่ม มันฟังดูโง่ แต่บางครั้งเราก็คิดว่า jQuery ใช้งานไม่ได้และทุกอย่างนั้นและปัญหาอยู่ที่การวางตำแหน่งขององค์ประกอบ DOM

— vicgilbcn
แหล่งที่มา

หรือตัวอย่างเช่น z-index!

— darren

3

คุณสามารถใช้$(function(){ // code });ซึ่งจะดำเนินการเมื่อเอกสารพร้อมที่จะรันโค้ดภายในบล็อกนั้น

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

— รักเยชกะดาษ
แหล่งที่มา

2

เพียงตรวจสอบอย่างรวดเร็วหากคุณใช้เครื่องมือสร้างเทมเพลตฝั่งไคลเอ็นต์เช่นแฮนด์บาร์ js ของคุณจะโหลดหลังเอกสารแล้วดังนั้นจะไม่มีองค์ประกอบใดที่จะผูกเหตุการณ์เข้าด้วยกันดังนั้นให้ใช้ onclick handler หรือใช้กับร่างกาย และตรวจสอบเป้าหมายปัจจุบัน

— Abhinav Singh
แหล่งที่มา

จริงอยู่ฉันใช้ flask / jinja และใช้งานไม่ได้เว้นแต่ฉันจะใช้คุณสมบัติ onclick ใน HTML และอ้างอิงจากที่นั่นไปยังฟังก์ชันใน <script> ของฉัน

— Rich Stone