ScrollSpy ของ Twitter Bootstrap ของฉันพยายามสอดแนมองค์ประกอบที่ไม่ควรถูกสอดแนมหรือไม่

ฉันใช้ BackboneJS และ Bootstrap และฉันพยายามเปิดใช้งานการสอดแนมการเลื่อนในเนื้อหาบางส่วนหลังจากที่ผู้เยี่ยมชมคลิกที่ปุ่ม

ดังนั้นเมื่อผู้ใช้คลิกที่ปุ่มนั้น สิ่งเหล่านี้จะถูกดำเนินการ:

$('#frontPageNav').css('display', 'block'); // It was hidden on load
$('#frontPageNav').scrollspy(); // Activate scrollspy, this is where the error happens
$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh'); // I think this is not needed because nothing was invisible before
});
$('#frontPageNav li').on('activate', function () { // This never gets emitted
  alert('activate!');
});

และเนื้อหาที่ฉันอยากให้ถูกสอดแนมนั้นอยู่ดังนี้:

<div data-spy="scroll" data-target="#frontPageNav">
  <div id="home-top" class="row slide">
  </div>
  <div id="home-how" class="row slide">
  </div>
  <div id="home-join" class="row slide">
  </div>
</div>

ไม่มีองค์ประกอบอื่นใดบนหน้าที่มีแอตทริบิวต์ data-spy ดังนั้นฉันคิดว่านี่ควรจะเป็นเนื้อหาเดียวที่ถูกสอดแนม แต่ดูเหมือนจะไม่ใช่: เมื่อโหลดหน้าเว็บฉันได้รับข้อผิดพลาด Uncaught TypeError: Cannot read property 'top' of null ซึ่งหมายความว่าปลั๊กอิน scrollspy กำลังพยายามค้นหา $.position() ขององค์ประกอบที่ไม่มีอยู่ ฉันเปิดเบรกข้อยกเว้นในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome และข้อยกเว้นที่ไม่ถูกตรวจจับอยู่ในบรรทัด 454 ของ bootstrap.js ซึ่งก็คือ && [[$href.position().top, href]]) || null และถ้าฉันโฮเวอร์ href ตัวเลือกจะมีไว้สำหรับองค์ประกอบที่ฉันไม่มีในมาร์กอัป แต่ ฉันมีลิงค์ไปยังแฮชด้วย

นี่หมายความว่าปลั๊กอิน scrollspy คิดว่าควรจะสอดแนมลิงก์ทั้งหมดที่มี href="/th#something" และค้นหาในองค์ประกอบมาร์กอัปด้วย ID นั้นหรือไม่ ทำไมมันไม่รักษาการสอดแนมให้กับองค์ประกอบด้วย data-spy="scroll" ?


person João Pinto Jerónimo    schedule 23.07.2012    source แหล่งที่มา


คำตอบ (1)


ด้วยการแนบปลั๊กอิน ScrollSpy เข้ากับองค์ประกอบเฉพาะ ปลั๊กอินจะรับฟังเหตุการณ์การเลื่อนในองค์ประกอบนั้น อย่างไรก็ตาม ปลั๊กอินใช้ตัวเลือก เป้าหมาย เพื่อกำหนดว่าลิงก์ใดมีสิทธิ์เปิดใช้งาน เว้นแต่จะมีการระบุเป้าหมายไว้อย่างชัดเจน ปลั๊กอิน ScrollSpy จะคัดลอกเนื้อหาทั้งหมดเพื่อหาลิงก์ที่ตรงกับตัวเลือก '.nav li > a' เมื่อระบุ เป้าหมาย ตัวเลือกจะกลายเป็น target + ' .nav li > a' ซึ่งจำกัดการค้นหาให้อยู่ภายใน เป้าหมาย

API รองรับข้อกำหนดผ่านมาร์กอัปโดยใช้ data-target รวมถึงส่งเป็นตัวเลือกในการเรียก JavaScript $('#myElement').scrollspy({target: '#myTarget'});

คำอธิบายเพิ่มเติมเกี่ยวกับวิธีการทำงานของปลั๊กอิน ScrollSpy สามารถพบได้ใน คำตอบของ วิธีเปิดใช้งานลิงก์สำหรับส่วนประกอบ Twitter Bootstrap Affix

person merv    schedule 30.08.2012