的jQuery replaceWith和切換衝突

Question

我

<div id=1> 
    <span id=2></span> 
</div> 
<div id=3> 
</div> 

我試圖用a取代span並使用錨.toggle()<div id=3>

$('#2').replaceWith(function(){ 
    return $("<a id=\"2\" href=\"#\" />").append($(this).contents()); 
}); 

這個工作在轉彎跨度到的HTML但是當我嘗試鏈接點擊功能.toggle()時，它拒絕切換。

$('#2').replaceWith(function() { 
    return $("<a id=\"2\" href=\"#\" />").append($(this).contents()); 
}).click(function() { 
    $('#3').toggle(); 
    return false; 
}); 

單擊功能.toggle()作品如果我刪除.replaceWith()。

Answer 1

我的最終解決方案

$('#2').replaceWith(function(){ 
    return $('<a id="' + $(this).attr('id') + '" href="#" />').append($(this).contents()); 
}); 

$('#2').click(function() { 
    $('#3').toggle(); 
    scrollToDiv($(this),0); 
    return false; 
}); 

Answer 2

您綁定到您剛刪除的元素。

$('#2') // <-- here you already selected the span 
// now you replaced it with a new element 
.replaceWith(function() { 
    return $("<a id=\"2\" href=\"#\" />").append($(this).contents()); 
}) 
// the selector is still on the span so you bound the click event to the span 
.click(function() { 
    $('#3').toggle(); 
    return false; 
}); 

你可以做的是使用委派，所以它不會影響你對元素所做的更改。其綁定到一個父元素

$('#1').on('click','#2',function(){ 
     //your code here 
}); 

現在你的父元素會聽取點擊事件冒泡並處理它們。所以這不要緊，你有多少次更改＃2單元 - 只要它的id = 2，那麼就會觸發處理器