javascript - 如何在运行时添加的对象上执行 Jquery 插件

Question

我有一个JQuery计算 textarea 中字符的插件。但是如果我在运行时使用 append("<textarea></textarea>") 添加文本区域例如，。

如何在附加的 textarea 上执行此插件？

$("textarea").charCount({
                        allowed: 200,       
                        warning: 30,
                        counterText: 'Characters left: '    
                });

在运行时添加文本区域..

$("#btnAddStep").click(function () {
                var text = "" +
                " <div class='row-fluid'>" +
                "   <div class='span10'>" +
                "      <input type='text' class='span12' placeholder='Type something…'>" +
                "  </div>" +
                " <div class='span2'>" +
                "    <div class='btn-group'>" +
                "        <button class='btn btn-mini' id='btnAddStep'><i class='icon icon-plus'></i></button>" +
                "        <button class='btn btn-mini'><i class='icon icon-minus'></i></button>" +
                "    </div>" +
                "  </div>" +
                " </div>" ;

                $("#response>#steps").append(text);
            });

Answer 1

在用于将文本区域添加到 div 的按钮的单击事件处理程序中，添加对插件方法的调用。

由于我看不到完整的代码，我假设该插件也会在运行时自动调用，在 $(document).ready() 或类似的内容中。如果您在调用后添加文本区域，则需要重新运行该插件。

您所要做的就是将再次发布的代码添加到您的点击事件代码中，但为了提高效率，我建议您添加另一个选项，而不是在每个文本区域上重新运行该插件搜索具有特定类的文本区域，然后在插件运行后删除该类。这样，您可以为所有新文本区域提供此类，并且在插件在其上运行后，它将永远不会再查看它们。

祝你好运!

编辑:我的一个 friend 正在看着我，并建议我澄清一下:你不必以任何方式修改你的插件(当然，我看不到完整的代码，所以我不能 100% 确定)这个，但我们只能说我 95% 确定)。您要做的就是更改事件处理程序(以及 document.ready 中进行的任何调用 - 从技术上讲，它是一个事件处理程序)，如下所示:

$("#buttonID").click(function() {
    ...your code...
    $("#placeToAddNewTextArea").append("<textarea class="newTA"></textarea>");
    $("textarea.newTA").charCount({ ......... });
    $("textarea.newTA").removeClass("newTA");
});

换句话说，您可以使用 CSS 作为标志，并在插件代码之外创建、使用和删除它们。