jQuery binden oder Live funktioniert nicht wie erwartet in meinem Plugin

Question

Ich schreibe ein Plugin für jQuery, die ein span-Element um ein Eingabe (Text) -Element umschließt. Wenn ich die Formularelementeingabe bind() oder live() anlege, um dem übergeordneten Element Klassen hinzuzufügen/zu entfernen, funktioniert die Bindung nicht. Folgendes berücksichtigen;

(function($){ 
    $.fn.MyPlugin = function() { 

    var $this, $tag; 

    return this.each(function(){ 
     $this = $(this); 
     $tag = $(document.createElement('span')); 
     $this.wrap($tag).bind('mouseover',function(){ 
      $tag.addClass('hover'); 
     }); 
    } 
})(jQuery); 

Verwendung von Google Chrome und dem Betrachten der Elemente und Konsolenausgabe, erwarte ich die ‚schweben‘ Klasse zu sehen, auf das span-Element hinzugefügt, wenn ich mein simuliert ein Mouseover-Ereignis zu bewegen. Es passiert jedoch nichts. Wenn ich die Variable $ tag nach dem Hinzufügen der Hover-Klasse in die Konsole drucke, wird sie in der Konsolenausgabe korrekt angezeigt.

Ich vermute, das hat etwas mit variablen Bereich zu tun, aber ich bin verloren versucht, eine Lösung zu erarbeiten.

Answer 1

Versuchen dies mit:

(function($){ 
    $.fn.MyPlugin = function() { 
     return this.each(function(){ 
      $(this).wrap('<span>').bind('mouseover',function(){ 
       $(this).parent().addClass('hover'); 
      }); 
     }); 
    }; 
})(jQuery); 

wrap, wenn sie mit einem Objekt oder einem jQuery DOM-Elemente verwendet, Klont, das Element und die Kopie verwendet, um die Auswahl zu umwickeln. Von der API:

[Wrap] das Objekt nicht bewegen, sondern nur klont es um das Ziel zu wickeln

Ihr Code eine Klasse auf ein Element hinzufügt, die in die eingefügt wurde nie DOM.

Answer 2

Versuchen

return this.each(function(){ 
    $this = $(this); 
    $tag = $(document.createElement('span')); 
    $this.wrap($tag); 
    $tag.bind('mouseover',function(){ 
     $tag.addClass('hover'); 
    }); 
} 

Wenn ich mich nicht irre Rückkehr $this in diesem Fall nicht einwickeln.

Answer 3

(function($){ 
    $.fn.MyPlugin = function() { 

     return this.each(function(){ 
      $(this).wrap("<span></span>") 
      $(this).parent('span').live('mouseover',function(){ 
       $(this).addClass('hover'); 
      }); 
     }); 
    } 
})(jQuery);