Question

我需要在我的所有textarea元素中附加一些代码，这在

中运行时工作正常

$(document).ready(function() {
     $('textarea').textareaCount(options);
});

但我有通过Ajax和模板加载的textarea元素，因此在文档准备好之后加载的任何textarea元素都不包含在jQuery select中，并且丢失了我正在添加的行为。

处理此问题的最佳方法是什么？

Answer 1

我建议添加它，因为textarea是专注的：

$(document).on( 'focus', 'textarea', function( ) {
    if( !$(this).data( 'hasSetup' ) ) {
        $(this).data('hasSetup',true).textareaCount(options);
    }
} );

.on的这种形式意味着document与选择器（textarea）匹配的所有子元素都会出现。这意味着它适用于所有当前和未来的元素。所以每次关注textarea时，代码都会运行。因为我们实际上只希望每个textarea运行一次，所以我使用了一个变量来检查计数器是否已经添加到当前的textarea中。使用.one不是一个选项，因为这只适用于第一个 textarea。

Answer 2

实际上，您需要在ajax准备好文档之后再次调用textareaCount(options)

例如

当您点击按钮时，您想要计算textareas：

$("#button").off('click').on('click', function() {
     $('textarea').textareaCount(options);
});

或以前的jquery版本

$("#button").die('click').live('click', function() {
     $('textarea').textareaCount(options);
});

Answer 3

在准备好的内容

$(document).ready(function() {

当你最初将代码附加到textareas时，给他们一个类来识别它们已经附加了代码。

$('textarea').textareaCount(options);
$('textarea').addClass('alreadyHasCount');

然后，将一个dom元素监听器添加到将要插入textareas的父级。让监听器查找不属于类'alreadyHasCount'的任何textareas，附加代码，然后给它们'alreadyHasCount'类

$("#textAreaParent").bind("DOMNodeInserted DOMSubtreeModified",function(){
    $('textarea:not(.alreadyHasCount)').textareaCount(options);
    $('textarea:not(.alreadyHasCount)').addClass('alreadyHasCount');
});

});

jQuery - 动态附加到元素

3 个答案: