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

How to excute Jquery plugin on an object added at runtime

本文关键字：执行 Jquery 插件 对象 运行时 添加      更新时间：2024-03-31

我有一个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);
            });

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

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

你所要做的就是将你再次发布的代码添加到你的点击事件代码中，但为了效率，我建议你添加另一个选项来搜索具有特定类的文本区域，然后在插件运行后删除该类，而不是在每个文本区域上再次运行插件。这样，你就可以把所有新的文本区域都给这个类，当插件在它们上运行后，它就再也不会看它们了。

祝你好运！

编辑：我的一个朋友回头看了看我，建议我澄清一下：你不必以任何方式修改你的插件（当然，我看不到完整的代码，所以我不能100%确定，但我们只能说我95%确定）。您要做的是更改事件处理程序（以及document.ready中的任何调用，从技术上讲，它是一个事件处理程序），如下所示：

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

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

查看jQuery SuperLive。

根据作者：

jQuery SuperLive是我最喜欢的新插件。Allen Mackley和我创建这个是为了解决大量应用JS问题。无论页面上何时存在元素，我们都需要插件来工作，而且，如果添加了属性，插件应该重新启用。

SuperLive做到了这一切。

这在IE中不起作用。还需要jQuery 1.7

演示视频：http://www.youtube.com/watch?v=mh5mGR2GyLY

下载：http://code.google.com/p/jquery-superlive/downloads/list

相关文章：