ฉันจะผูกแถบเครื่องมือ Twitter Bootstrap กับองค์ประกอบที่สร้างขึ้นแบบไดนามิกได้อย่างไร

ฉันใช้ Twitter bootstrap tooltips กับ javascript ดังนี้:

$('a[rel=tooltip]').tooltip();

มาร์กอัปของฉันมีลักษณะดังนี้:

<a rel="tooltip" title="Not implemented" class="btn"><i class="icon-file"></i></a>

สิ่งนี้ใช้ได้ดี แต่ฉันเพิ่ม<a>องค์ประกอบแบบไดนามิกและเคล็ดลับเครื่องมือไม่แสดงขึ้นสำหรับองค์ประกอบแบบไดนามิกเหล่านั้น ฉันรู้ว่าเป็นเพราะฉันผูก. ทูลทิป () เพียงครั้งเดียวเมื่อเอกสารโหลดเสร็จด้วย$(document).ready(function()ฟังก์ชั่นjquery ทั่วไป

ฉันจะผูกสิ่งนี้กับองค์ประกอบที่สร้างขึ้นแบบไดนามิกได้อย่างไร ฉันมักจะทำสิ่งนี้ผ่านวิธีการ jquery live () อย่างไรก็ตามเหตุการณ์ที่ฉันใช้ผูกคืออะไร ฉันแค่ไม่แน่ใจว่าจะขอ bootstrap .tooltip () กับ jquery .live () ได้อย่างไร

ฉันพบวิธีหนึ่งที่จะทำให้งานนี้เป็นแบบนี้:

/* Add new 'rows' when plus sign is clicked */
$("a.add").live('click', function () {
    var clicked_li = $(this).parent('li');
    var clone = clicked_li.clone();

    clone.find(':input').each(function() {
        $(this).val('');
    });

    clicked_li.after(clone);
    $('a[rel=tooltip]').tooltip();
});

มันใช้งานได้ แต่ดูเหมือนแฮ็ค ฉันกำลังเรียกสายเดียวกัน .tooltip () เหมือนกันในการเรียก $ (พร้อม) ดังนั้นองค์ประกอบที่มีอยู่เมื่อหน้าแรกโหลดและจับคู่ตัวเลือกนั้นท้ายด้วยคำแนะนำเครื่องมือสองครั้ง?

ฉันไม่เห็นปัญหาใด ๆ กับวิธีการนี้ ฉันแค่มองหาวิธีปฏิบัติที่ดีที่สุดหรือความเข้าใจในพฤติกรรม

ลองอันนี้:

$('body').tooltip({
    selector: '[rel=tooltip]'
});

หากคุณมีการกำหนดค่าเคล็ดลับเครื่องมือหลายอย่างที่คุณต้องการเริ่มต้นสิ่งนี้ใช้ได้ดีสำหรับฉัน

$("body").tooltip({
    selector: '[data-toggle="tooltip"]'
});

จากนั้นคุณสามารถตั้งค่าคุณสมบัติในแต่ละองค์ประกอบโดยใช้dataคุณสมบัติ

สำหรับฉันการจับเหตุการณ์ของ mouseenter นั้นค่อนข้างบั๊กและคำแนะนำเครื่องมือไม่แสดง / ซ่อนอย่างถูกต้อง ฉันต้องเขียนสิ่งนี้และตอนนี้มันทำงานได้อย่างสมบูรณ์แบบ:

$(document).on('mouseenter','[rel=tooltip]', function(){
    $(this).tooltip('show');
});

$(document).on('mouseleave','[rel=tooltip]', function(){
    $(this).tooltip('hide');
});

ฉันโพสต์คำตอบนานกว่านี้ที่นี่: https://stackoverflow.com/a/20877657/207661

TL; DR: คุณต้องการโค้ดเพียงบรรทัดเดียวที่ทำงานในเอกสารพร้อมเหตุการณ์:

$(document.body).tooltip({ selector: "[title]" });

รหัสที่ซับซ้อนกว่าที่แนะนำในคำตอบอื่น ๆ นั้นไม่จำเป็น (ฉันได้ทดสอบด้วย Bootstrap 3.0)

สำหรับฉันแล้ว js นี้สร้างปัญหาเดียวกันกับPaola

ทางออกของฉัน:

$(document.body).tooltip({selector: '[title]'})
.on('click mouseenter mouseleave','[title]', function(ev) {
    $(this).tooltip('mouseenter' === ev.type? 'show': 'hide');
});

แทนที่จะค้นหาในเนื้อหาเต็ม หนึ่งสามารถใช้ตัวเลือกชื่อแบบไดนามิกที่มีอยู่แล้วในสถานการณ์เช่นนี้ฉันคิดว่า:

$btn.tooltip({
  title: function(){
    return $(this).attr('title');
  }
});

ฉันพบว่าการรวมกันของคำตอบเหล่านี้ให้ผลลัพธ์ที่ดีที่สุด - ช่วยให้ฉันยังคงวางคำแนะนำเครื่องมือและแนบกับภาชนะที่เกี่ยวข้อง:

$('body').on('mouseenter', '[rel=tooltip]', function(){
  var el = $(this);
  if (el.data('tooltip') === undefined) {
    el.tooltip({
      placement: el.data("placement") || "top",
      container: el.data("container") || false
    });
  }
  el.tooltip('show');
});

$('body').on('mouseleave', '[rel=tooltip]', function(){
  $(this).tooltip('hide');
});

HTML ที่เกี่ยวข้อง:

<button rel="tooltip" class="btn" data-placement="bottom" data-container=".some-parent" title="Show Tooltip">
    <i class="icon-some-icon"></i>
</button>