Могу ли я добавить этот код в тот же плагин

Question

У меня есть плагин (называемый 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, но элемент, который в конечном итоге окрашивается, это новая разметка span, которая добавляется .colorable. Но я хотел бы сохранить весь этот код для этой операции в одном плагине / файле. Является ли это возможным?

Answer 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 );

Answer 2

Вы можете использовать это,

(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.

Answer 3

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 );

Надеюсьэто помогает!