Question

我正在使用Bootstrap 3框架工作来创建一个包含我<td>中的一些弹出窗口的表格。我只显示弹出框，如果单击弹出框的图标（<i>），则单击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

绑定click事件时，将其绑定到DOM元素。如果更改此DOM元素，则新元素不会绑定。

您可以绑定新元素，或使用delegate函数（http://api.jquery.com/delegate/）

在dom元素改变后，popover没有显示

2 个答案: