Popover не отображается после изменения элемента dom

Question

Я использую рамочную работу Bootstrap 3, чтобы создать таблицу с некоторыми popovers в моем <td>. Я показываю только popover, если щелкнул значок (<i>) для popover, иначе я выполняю другую функцию после нажатия td. Однако, если td изменяется, popover перестает работать, и я не могу понять, почему. Я создал jsFiddle, который отображает проблему.

http://jsfiddle.net/pNxa8/

Answer 1

http://jsfiddle.net/pNxa8/10/

$(document).ready(function() { 
    setPopo(); 
}); 

function changeColor(row) 
{ 

    $(row).find('td i.nextPopover').popover('hide'); 
    inner = row.innerHTML; 
    if(row.style.backgroundColor == 'white') 
     { 
      row.style.backgroundColor = 'green'; 
      var tmp = inner.replace('</td>'," <i style='display:inline-block;margin-left:-25px;' class='fa fa-check pull-right'></i></td>"); 
      row.innerHTML = tmp; 
      setPopo(); 
     } 
    else 
    { 

     row.style.backgroundColor = 'white'; 
     var tmp = inner.replace('<i style="display:inline-block;margin-left:-25px;" class="fa fa-check pull-right"></i></td>',"</td>"); 
     row.innerHTML = tmp; 

     setPopo(); 
    } 
} 


function setPopo() 
{ 
    $('tr').each(function() { 
     $(this).find('.nextPopover').popover('hide'); 
     $(this).unbind('click');}); 
    $('tr').each( function() { $(this).on('click', function() { 

     changeColor(this)  }) } ); 
    $('.nextPopover').popover('destroy'); 
    $('.nextPopover').popover(); 
    $('.nextPopover').click(function(e) 
    { 
     e.stopPropagation(); 
     $(this).popover(); 
     $('.nextPopover').not(this).popover('hide'); 
    });  
} 

Answer 2

При связывании событие щелчка мышью, вы привязать его к DOM элементу. Если вы измените этот элемент DOM, новый не будет привязан.

Вы можете связать новый элемент, или использовать функцию delegate (http://api.jquery.com/delegate/)