0

我正在使用名为charCount的 jQuery 插件来显示某些文本区域的字符计数器，它工作得很好，但是当我在页面上添加新的文本区域（动态）时，新的文本区域没有计数器，我是新手，这是我使用插件的方式：

$('.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 });
        }
    });
4

4 回答 4

0

听起来您需要在将每个文本区域动态添加到页面后初始化 charCount。如果您只有上面的行，它只会影响页面加载时页面上的文本区域。所以你会做这样的事情：

//add the textarea with an ID of 'newTextarea1'
//then use charCount on the new textarea
$('#newTextarea1').charCount({ allowed: 140, warning: 20 });
于 2012-12-29T20:14:15.547 回答
0

最简单的方法就是在创建的任何新元素上运行该方法。

$('<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 });
    }
})

注意很多人认为它不是.on()贬值的别名。.live()要使用on()as live()，即对于在运行时不存在的元素，它需要一些已经存在的东西来锚定到诸如在其中创建内容的父 div 或者，如果你很懒，document.

于 2012-12-29T20:21:41.093 回答
0

在定位选择器的父容器时尝试使用.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

查看工作演示

于 2012-12-29T20:52:39.510 回答
-4

当你添加一个新的文本区域时，在你添加它的元素中查找新的元素find()并只在该元素上调用插件

假设您有某种行结构或文本区域的包装器：

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

newDiv.find('.message-form').charCount({ allowed: 140, warning: 20 });
于 2012-12-29T20:27:57.907 回答