我可以在同一个插件中添加此代码吗答案

【问题标题】：Can I add this code in the same plugin我可以在同一个插件中添加此代码吗
【发布时间】：2011-02-05 16:40:41
【问题描述】：

我有一个插件（称为pluggable），它接受任何.plugin 并添加这个标记

<span class="colorable">color me</span>

这是我使用 class="plugin" 的原始标记。

<div class="plugin"></div>
<div class="plugin"></div>
<div class="plugin"></div>

在 js 中，我调用$('.plugin').pluggable();，它在上面添加了<span> html 并使其看起来像这样

<div class="plugin"><span class="colorable">color me</span></div>
<div class="plugin"><span class="colorable">color me</span></div>
<div class="plugin"><span class="colorable">color me</span></div>

这就是插件所做的一切（添加这个html），插件本身就是这样的简单

(function($){
    $.fn.pluggable = function() {    
        return this.each(function() {
            $(this).html('<span class="colorable">color me</span>');
        });
    };
})( jQuery );

但我真正想要做的是，在那之后，当单击具有类 .colorable 的跨度时，我希望它的背景颜色更改为红色。我可以像这样用jquery做到这一点

$('.colorable').click(function(){
   $this.css("background-color", "orange");
});

但是有没有办法让这个代码包含在同一个插件中，以便整个操作是自包含的。我想知道，因为插件操作的原始元素是类.plugin，但最终着色的元素是添加.colorable 的新跨度标记。但我想将此操作的所有这些代码保存在一个插件/文件中。是否可以？

【问题讨论】：

标签： javascript jquery plugins jquery-plugins

【解决方案1】：

您可以将.click 处理程序绑定到.colorable 跨度插入后：

(function($){
    $.fn.pluggable = function() {    
        return this.each(function() {
            $(this).html('<span class="colorable">color me</span>');
            $(this).find(".colorable").click(function() {
                $(this).css("background-color", "orange");
            });
        });               
})( jQuery );

【讨论】：

【解决方案2】：

jQuery 不会替换用于创建新元素的 dom 函数 (document.createElement('tagName'))，学习如何将这些函数与 jquery 一起使用以更好地构建代码非常有用。

(function($){
    $.fn.pluggable = function() {    
        return this.each(function() {

            // Create the element
            var spanElement = document.createElement('span');
            // Set the class
            spanEleement.className = 'colorable';
            spanElement.appendChild(document.createTextNode('color me'));
            // Add the event using jQuery
            $(spanElement).click(function() {
              $(this).css('background-color', 'orange');
            });
            // Append it using jQuery function
            $(this).append(spanElement);
            // native function for this would be element.appendChild()

        });               
})( jQuery );

希望这会有所帮助！

【讨论】：

【解决方案3】：

你可以用这个，

(function ($) {
$.fn.pluggable = function () {
    return this.each(function () {
        var span  = $('<span class="colorable">color me</span>');
        span.click(function(){
               $(this).css("background-color", "orange");
        });
        $(this).append(span);
    });
};
})(jQuery);

在将元素附加到 DOM 之前，随心所欲。

【讨论】：