Click事件替換

Question

我得到這個代碼元素後不工作當我點擊#or點擊其他地方（然後將其替換爲原始內容），並且當我添加原始內容時，它不起作用。

這是我用原來的更換text input上取代#m0代碼：

$(function() { 
    $('.m').click(function() { 
     $("#m0").html('<label><input type="radio" id="or" name="type" value="1"/>Click me</label>'); 
    }); 
}); 

所以，可以肯定你沒有理解我：

原始內容是：

<label><input type="radio" id="or" name="type" value="1"/>Click me</label>

然後我用這個替換上面的文本輸入：

$(function() { 
    $('#or').click(function() { 
     $("#m0").html('<input type="text" class="highlight" name="test1"/>'); 
    }); 
}); 

，然後......我用這個代碼來恢復回原來的內容：

$(function() { 
    $('.m').click(function() { 
     $("#m0").html('<label><input type="radio" id="or" name="type" value="1"/>Click me</label>'); 
    }); 
}); 

最後當：

<input type="text" class="highlight" name="test1"/>

被替換爲：

<label><input type="radio" id="or" name="type" value="1"/>Click me</label>

點擊事件不再有效。

Answer 1

使用現場方法，結合事件DOM更新http://api.jquery.com/live/

$(function() { 
    $('#or').live('click', function() { 
     $("#m0").html('<input type="text" class="highlight" name="test1"/>'); 
    }); 
}); 

Answer 2

更換.click(...)與.live("click", ...)

Answer 3

你必須讓事件處理程序live：

$('#or').live("click", function() { 
    //Event hander code 
}); 

從jQuery文檔爲live：

附加一個處理程序針對事件與當前 選擇器匹配的所有元素現在和未來。

問題是事件處理程序綁定到綁定時存在於DOM中的元素。當該元素被刪除時，事件處理程序將隨之刪除。當你添加一個新元素時（它是一個新元素，即使它看起來與舊元素相同），它沒有綁定事件處理程序。這就是live派上用場的地方。它監視DOM以添加與選擇器匹配的元素，並將事件處理程序應用於所做的任何處理。

Answer 4

更新這個答案 是 已經過時，甚至之後。檢查JQuery.on，它結合了兩全其美。它允許你將一個事件綁定到一個元素，而事件本身是針對該元素內的元素的。這就像live，只有你可以選擇一個特定的目標元素（例如一個容器元素，其中添加/改變了Ajax內容）。 on代替live,bind和delegate。

原來的答覆（jQuery的1.7前）：JQuery的live方法，通過答案的建議，是很容易的出路，但它也有一些缺點。它比較慢，因爲DOM的每個修改都會導致所有「實時」選擇器被重新評估。

也看到這個答案的一些缺點：Performance difference between jQuery's .live('click', fn) and .click(fn)

因此，我寧願用bind或click點擊事件明確綁定到新創建的元素。這是一個更多的工作（儘管如果你正確地構建你的代碼是可以忽略的），它會給你更好的性能和更多的控制。