จะสร้างกล่องแจ้งเตือนด้วย Javascript ได้อย่างไร

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

การสาธิตง่าย ๆ ของสิ่งที่ฉันพยายามทำ:

HTML:

<a id="add">Add message</a>

JS:

$("#add").click(function(event) {
   $("body").append("<div class=\"alert-box\" data-alert>Dynamic alert<a class=\"close\">&times;</a></div>");
});

รหัสปากกา: http://codepen.io/dgross/pen/myyerB

อย่างไรก็ตาม การแก้ไข HTML เพื่อรวมการแจ้งเตือนแยกต่างหากจะทำให้ทั้งสองทำงาน:

<a id="add">Add message</a>
<div class="alert-box" data-alert>
...etc

รหัสปากกา: http://codepen.io/dgross/pen/qEEOqN

มีวิธีอย่างเป็นทางการในการทำเช่นนี้ที่ฉันขาดหายไปหรือไม่? ฉันได้ลองกระตุ้นเหตุการณ์ 'open.fndtn.alert-box' ซึ่งดูเหมือนจะไม่ทำอะไรเลย


jquery zurb-foundation zurb-foundation-5
person dgross    schedule 18.11.2014    source แหล่งที่มา
comment
jQuery-UI มีวิดเจ็ตโต้ตอบที่ใช้งานได้ทุกครั้ง   -  person DevlshOne    schedule 18.11.2014
comment
@DevlshOne ขอบคุณ! ฉันกำลังพยายามให้การแจ้งเตือนของมูลนิธิทำงานก่อน เพราะเราใช้มันที่อื่นบนเว็บไซต์ แต่ถ้าทำไม่ได้ ฉันจะดูในวิดเจ็ตโต้ตอบ   -  person dgross    schedule 18.11.2014

คำตอบ (1)


arrow_upward
6
arrow_downward

ฉันเพิ่งขุดซอร์สโค้ดและพบฟังก์ชันชื่อ reflow การแก้ไข JS ของฉันเป็นสิ่งต่อไปนี้สามารถแก้ไขปัญหาได้:

$("#add").click(function(event) {
   $("body").append("<div class=\"alert-box\" data-alert>Dynamic alert<a class=\"close\">&times;</a></div>");
   $(document).foundation('alert','reflow');
});
person dgross    schedule 18.11.2014