2011-01-11 13 views
0

入力(テキスト)要素の周りにスパン要素をラップするjQueryのプラグインを作成しています。フォーム要素の入力をbind()またはlive()して、親要素にクラスを追加/削除すると、バインディングは機能しません。次のことを考えてみましょう。 Google Chromeを使用して要素とコンソール出力を表示するjQueryバインドまたはライブがプラグインで期待どおりに動作しない

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

は、私は私が私のシミュレートmouseoverイベントを移動すると、span要素に追加「ホバー」クラスを参照してくださいことを期待しています。しかし、何も起こりません。ホバークラスを追加した後、$ tag変数をコンソールに出力すると、コンソール出力に正しく表示されます。

私はこれが可変スコープと関係があると推測していますが、私は解決策を見つけようとして迷っています。私はこのときのリターン$thisをラップん間違っていない場合は

+0

脇に、 'document.createElement'は必要ありません。 '$ this.wrap(" ")... – HackedByChinese

+0

$(document.createElement())が( '')よりも速いところを読んでいます。私は今、リンクを見つけることができません... – Kevin

答えて

0

この使用してみてください:jQueryオブジェクトまたはDOMエレメントで使用

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

wrap、要素のクローンを選択し、をラップするためにコピーを使用しています。 APIから:

[ラップ]オブジェクトを移動するだけでなく、その対象を包み込むように、それを複製していない

あなたのコードが挿入されていない要素にクラスを追加して

DOM。

+0

完璧な作品!そしてあなたの説明は完璧な意味を持っています。どうもありがとうございました。 – Kevin

0

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

を試してみてください。

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

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