dom元素髮生變化後未顯示彈出菜單

我使用的是Bootstrap 3框架工作，在我的<td>中創建了一些彈出式菜單。如果點擊彈出窗口的圖標（<i>），我只顯示彈出窗口，否則，我會執行另一個功能，一旦td被點擊。但是，如果td發生變化，popover停止工作，我似乎無法弄清楚原因。我創建了一個jsFiddle，它顯示了問題。dom元素髮生變化後未顯示彈出菜單

http://jsfiddle.net/pNxa8/

來源

2013-12-12 Niels Sønderbæk

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'); 
    });  
}

來源

2013-12-12 13:44:06 pbenard

這很好工作的初始化，但一旦我點擊了TR這是行不通的，即使我沒有叫setPopo（）點擊後。這是否重要，dom元素是由PHP創建的？ –

請問，你可以看看http://www.youtube.com/watch?v=o5oifnV7G6o，這是我用鉻瀏覽器的桌面記錄，我在想每件事都可以...... – pbenard

哦，我是不是說你jsFiddle不工作，但對於我的實際問題（小提琴試圖模仿），我的元素是由PHP創建的。 –

當您綁定click事件，您將其綁定到一個DOM元素。如果您更改此DOM元素，則不會綁定新元素。

你可以綁定新的元素，或者使用delegate功能（http://api.jquery.com/delegate/）

來源

2013-12-12 13:56:53 EoiFirst

dom元素髮生變化後未顯示彈出菜單

回答

相關問題