は、動的に作成されたHTML

Question

のためのjQueryプラグインを使用するので、私はしかし、私はあるHTML要素でこれを使用する必要がスタックオーバーフローが私に利用できるようにしている。このjQueryプラグイン:)

Auto-size dynamic text to fill fixed size container

を使用したいです動的に作成されたサーバー側。たとえば、

私は、すべての要素を作成してHTMLに変換した後、フロントエンドへ（HTML形式で）基本的にJSON文字列の配列にして返します：前面に続い

public JsonResult GetMessages() 
{ 
    // do conversion work 
    List<string> htmlMessages = new List<string>(); 
    foreach(Message message in this.messages) 
    { 
     htmlMessages.Add(message.toHTML()); 
    } 
    return Json(htmlMessages); 
} 

そして、私はこのようなjQueryのでdivにそれらを追加し終わる：

// make my AJAX call 
// in the success method I do this 
for (var i = 0; i < data.length; i++) 
{ 
    $('#containerDiv').append(data[i]); 
} 

さて、これは正常に動作しますが、私はその後、divs中の一つの中のテキストサイズをフォーマットするために追加されますこれらの各要素にjQueryプラグインを呼び出す方法要素？

Answer 1

私は、HTML自体がどのようなものか知っているが、このような何かをしようとしません。

// snip... 
var $container = $('#containerDiv'); 
for (var i = 0; i < data.length; i++) 
{ 
    $container.append(data[i]); 
} 
$container.children('div').textfill({ maxFontPixels: 36 }); 

プラグインは、単一の<span>要素を含む要素に依存しているので、あなたのように見えますおそらくHTMLはそれに応じて構造化されなければなりません。また、wee little testに基づいて、複数の要素を含むjQueryコレクションで呼び出されたときにプラグインが正しく動作しないように見えます。簡単な修正：

$container.children('div').each(function() 
{ 
    $(this).textfill({ maxFontPixels: 36 }); 
}); 

「右の方法は、」しかし、実際にプラグインを変更することです：

;(function($) { 
    $.fn.textfill = function(options) { 
     var fontSize = options.maxFontPixels; 
     this.each(function() { 
      var $this = $(this), 
       ourText = $this.find('span:visible:first'), 
       maxHeight = $this.height(), 
       maxWidth = $this.width(), 
       textHeight, 
       textWidth; 
      do { 
       ourText.css('font-size', fontSize); 
       textHeight = ourText.height(); 
       textWidth = ourText.width(); 
       fontSize = fontSize - 1; 
      } while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3); 
     }); 
     return this; 
    } 
})(jQuery); 

---

だからあなたの変更プラグイン、それはすべての単一のスパンでそれを呼び出します。それはコンテナのdivで見つけるか？

かなりです。私の変更はちょうどあなたが、それは要素が動的であるときに機能を実行することができますlivequeryのための仕事、可能性のようなこの音を

$container.children('div').textfill({ maxFontPixels: 36 }); 

Answer 2

DOM要素が動的に追加されたときにプラグインを追加するには、.load（）イベントを使用できます。 http://api.jquery.com/load-event/

// make my AJAX call 
// in the success method I do this 
for (var i = 0; i < data.length; i++) 
{ 
var elem = data[i]; 
elem.load(function(){ 
// Plugin here. 
}); 

    $('#containerDiv').append(elem); 
} 

Answer 3

で

$container.children('div').each(function() 
{ 
    $(this).textfill({ maxFontPixels: 36 }); 
}); 

を交換することができるだろうということを意味しますDOMに追加されました。