Использование jquery in popover

Question

Я пытаюсь добавить некоторые элементы в popover и связать некоторые команды с элементами.

Допустим, у меня есть следующий блок:

<div id ="pop_models"> 
<a href="javascript:;" class="model">TEST MODEL</a> 
</div> 

И

$(".model").click(function() { 
     alert('I work'); 
    }); 

Если я нажимаю на ссылку, конечно, я получит предупреждающее сообщение.

Однако, если я покажу свой div с помощью popover, предупреждение не отображается, ничего не происходит, когда я нажимаю на него.

I.e. Я связываю следующий код с моим пирогом

 $('[rel=popover]').popover({ 
      html : true, 
      content: function() { 
       return $('#pop_models').html(); 
      } 
     }); 

Кажется, что $(".model").click(function() { не находит model класса в пироге.

Answer 1

Для функциональности поповер ... это может помочь вам

HTML

<a href="#" data-toggle="popover" data-html="true" 
     data-content="<p>Example 1" title="Popover Method 1">Popover Method 1 1</a> 

Javascript

$(function(){ 
    $("[data-toggle=popover]").popover(); 
}); 

Answer 2

При связывании обработчика к элементу типа $ ('.model'), обработчик немедленно привязан к жизненному циклу этого элемента.

Ваша функция контента каждый раз возвращает новый HTML-код, поэтому вы каждый раз создаете новый элемент DOM без обработчиков.

Вы можете решить эту проблему, либо:

1. Убедитесь, что вы добавить обработчик щелчка к вашему элементу каждый раз, когда он будет создан или
2. Зарегистрируйте свое мероприятие на некотором delegate - устойчивый элемент, который всегда существует в DOM. Самый простой (и не рекомендуемый) пример - $ (body) .find ('. Model'). Click (function() {...});

# 2 сложно, потому что теоретически вы не знаете, где Bootstrap на самом деле собирается вставить элемент popover в DOM. Таким образом, вам будет трудно найти хороший родительский элемент для использования в качестве делегата.

Таким образом, вы, вероятно, захотите пойти с №1. Вы можете сделать это, зарегистрировавшись для events из Bootstrap, который сообщит вам, когда ваш элемент находится в DOM. Просто добавьте код, чтобы зарегистрировать обработчик кликов внутри обработчика событий (либо show.bs.popover, либо insert.bs.popover), и все будет готово.