ฉันใช้ 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"
?