jQuery中的字符計數器加載文本區域的Ajax？

字符計數已經涵蓋了很多 - 我找不到的是如何讓它計算動態加載的內容。jQuery中的字符計數器加載文本區域的Ajax？

我使用的是jqEasy Character Counter這是一個很好的jQuery插件。它與輸入/ textareas在同一頁面上漂亮地工作，但如果我嘗試通過ajax調用加載內容，它停止工作。這是我到目前爲止的代碼：

這是字符計數器：

$(document).ready(function(){ 

$(".countable").jqEasyCounter({ 
     'maxChars': 250, 
     'maxCharsWarning': 230, 
     'msgFontSize': '11px', 
     'msgFontColor': '#000', 
     'msgFontFamily': 'Verdana', 
     'msgTextAlign': 'right', 
     'msgWarningColor': '#F00', 
     'msgAppendMethod': 'insertAfter'     
    }); 
});

這是加載動態內容的Ajax調用：

$(document).on("change", "#sitedrop_id", function(event){ 
    $.post(
    'load_site.php', 
    $("#siteselectform").serialize(), 
    function(data){ 
     $("#sitedata").html(data) 
    } 
); 
    return false; 
    });

這是文領域之一形式從另一個頁面加載：

<p> 
    <label for="headermsg_id" style="width:150px">Heading</label><textarea 
class="countable" rows="4" cols="55" name="headermsg" id="headermsg_id" 
style="resize: none; font-family:Arial, Helvetica, sans-serif; font-size:12px;"> 
</textarea> 
</p>

我使用jQuery 1.9.1，我已經試過$(document).on("change","#headermsg_id",function(event){然後櫃檯，但那不工作。

任何幫助將不勝感激。感謝

來源

2013-06-24 Joe Keene

重新初始化計數器插件與AJAX加載的東西更換您的內容之後，例如：

var initCounter = function() { 
    $(".countable").jqEasyCounter({ 
     'maxChars': 250, 
     'maxCharsWarning': 230, 
     'msgFontSize': '11px', 
     'msgFontColor': '#000', 
     'msgFontFamily': 'Verdana', 
     'msgTextAlign': 'right', 
     'msgWarningColor': '#F00', 
     'msgAppendMethod': 'insertAfter'     
    }); 
}; 


$.post({ 
    ... 
    function(data){ 
     $("#sitedata").html(data); 
     initCounter(); 
    } 
});

來源

2013-06-24 13:42:02 karim79

謝謝隊友 - 這是做的伎倆:) –

。在你的發佈代碼編號sitedata沒有元素。試着用

$("#headermsg_id").html(data)

更換

$("#sitedata").html(data)

，因爲這是你已經發布它具有類可數只有那些元素被計算在內，因爲你已經有選初始化easyCounter的唯一元素「.countable」

來源

2013-06-24 13:42:35

#sataata是ajax內容正在加載 - 而textarea具有類'countable'。 –

是的，但是元素*＃sitedata *必須獲得類* countable *或者您必須將文本放在textarea中。或者，你可以擴展你的選擇器來初始化插件：$（「。countable，#sitedata」）。jqEasyCounter（{...}） –

jQuery中的字符計數器加載文本區域的Ajax？

回答

相關問題