Question

我正在使用名为 charCount 的jQuery插件来显示某些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

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

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

Answer 2

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

$('<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()用作document，即对于在运行时不存在的元素，它需要一些已经存在的东西来锚定，例如在div内部创建内容的父div，或如果你很懒，{{1}}。

Answer 3

尝试将.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()建议使用较低版本。

编辑：我期待在Character Count插件中找到一个回调，但它不存在......所以，为了避免计数器重复，我们可以通过这种方式调整代码：

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

参见 working DEMO

Answer 4

当您添加新的textarea时，请查看使用find()添加新元素的元素，并仅在该元素上调用插件

假设您有某种行结构或textarea的包装器：

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

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

我怎样才能在jQuery中创建这个.live（）

4 个答案: