1

字符计数已经涵盖了很多 - 我不知道如何让它计算动态加载的内容。

我正在使用jqEasy Character Counter，这是一个不错的 jQuery 插件。它与同一页面上的输入/文本区域完美配合，但如果我尝试通过 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){了计数器，但那也不起作用。

任何帮助将不胜感激。谢谢

4

2 回答 2

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();
    }
});
于 2013-06-24T13:42:02.917 回答
0

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

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

和

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

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

于 2013-06-24T13:42:35.860 回答