jquery - jQuery - 动态附加到元素

Question

我需要将一些代码附加到我的所有 textarea 元素，这在运行时工作正常

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

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

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

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不是一个选项，因为这仅适用于第一个文本区域。

Answer 2

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

例如

当您单击要计算文本区域的按钮时：

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

然后，向将插入 textareas 的父级添加一个 dom 元素侦听器。让听众寻找任何不属于“alreadyHasCount”类的文本区域，附上代码，然后给他们“alreadyHasCount”类

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

});