我如何使jQuery中的.live（）

Question

我使用jQuery插件charCount爲某些textareas顯示字符計數器，它工作的很好，但是當我在頁面上添加新的文本區域時（dinamically） ，新的文本區域沒有櫃檯，我是新手，這裏是我如何使用插件：

$('.message-form').charCount({ allowed: 140, warning: 20 });

更新解決方案：

$(".message-form").live("click", function(){ 
     if ($(this).data('hascharcount') == undefined) { 
      $(this).data('hascharcount', true).charCount({ allowed: 140, warning: 20 }); 
     } 
    }); 

Answer 1

最簡單的方法就是在創建的任何新元素上運行該方法。

$('<textarea ...>').appendTo('#wherever').charCount({ allowed: 140, warning: 20 }); 

但是你問有關使用on()這意味着你不想這樣做，這樣做。

但

$('.message-form').charCount({ allowed: 140, warning: 20 }); 

不能簡單地進行使用on()爲on()結合事件。而不是編輯一個可能隨時更新作者的插件，這意味着重新擺弄它，寫下它。因此，如果您不想在動態創建元素後每次調用.charCount，則可以執行此操作，這將根據情境調用它（即直到用戶實際使用元素爲止）。

$(document).on('focus', '.message-form', function(){ 
    if (typeof $(this).data('hascharcount')=='undefined') { 
     $(this).data('hascharcount', true).charCount({ allowed: 140, warning: 20 }); 
    } 
}) 

N.B.很多人認爲.on()是折舊的.live()的別名，它不是。要使用on()作爲live()，即對於在運行時不存在的元素，它需要一些已經存在的用於錨定的內容，例如在其中創建內容的父div，或者如果您是懶惰的document。

Answer 2

這聽起來像你需要在每個文本區域初始化charCount後，將其動態添加到頁面中。如果您只有上面的行，它只會影響頁面加載時頁面上的textareas。所以你可以這樣做：

//add the textarea with an ID of 'newTextarea1' 
//then use charCount on the new textarea 
$('#newTextarea1').charCount({ allowed: 140, warning: 20 }); 

Answer 3

當您添加一個新的文本區域，放眼元素中添加它使用find()爲新的，並呼籲該元素的插件只

假設你有某種排結構，或包裝的文字區域：

var newDiv=$('<div class="foo"><textarea class="message-form"></textarea></div>').appendTo('#content') 

newDiv.find('.message-form').charCount({ allowed: 140, warning: 20 }); 

Answer 4

嘗試使用.on()與focusin事件而針對您的選擇.message-form像父容器：

$("#parentContainer").on("focusin", function(){ 
    $('.message-form').charCount({ allowed: 140, warning: 20 }); 
}); // on 

...或者你可以將目標body標籤或document，而不是像：

$("body").on("focusin", function(){ 
    $('.message-form').charCount({ allowed: 140, warning: 20 }); 
}); // on 

...這將允許你使用你的插件與目前和未來的元素（無需每次添加新元素時重新初始化您的插件）

我已成功地使用該方法與其他不支持動態添加的插件元素，你可以在這裏看到https://stackoverflow.com/a/9084293/1055987

注意：.on()需要的jQuery V1.7 +，否則.delegate()建議低版本。

編輯：我期待找到字符計數插件中的回調，但它不存在......因此，爲了避免重複計數，我們可以調整代碼是這樣的：

$("#myForm").on("focusin", '.message-form', function() { 
    $(this).next("span.counter").remove(); 
    $(this).charCount({ 
     allowed: 140, 
     warning: 20 
    }); 
}); // on 

見working DEMO