Question

字符计数已经涵盖了很多 - 我无法找到的是如何计算动态加载的内容。

我正在使用jqEasy Character Counter这是一个很好的jQuery插件。它在同一页面上与输入/ textareas很好地工作，但如果我尝试通过ajax调用加载内容它停止工作。到目前为止，这是我的代码：

这是char计数器：

$(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){然后是计数器，但那也没有用。

非常感谢任何帮助。感谢

Answer 1

在用加载了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();
    }
});

Answer 2

在您发布的代码中没有ID sitedata 的元素。尝试替换

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

带

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

因为这是您发布的唯一具有 countable 类的元素，并且只有这些元素才会被计算，因为您已使用选择器“.countable”初始化了easyCounter

jQuery中的字符计数器为ajax加载的文本区域？

2 个答案: