Использование плагина JQuery для динамически создаваемого HTML

Question

, поэтому я хочу использовать этот плагин JQuery, который мне предоставил Stack Overflow:)

Авторазмер динамического текста для заполнения контейнера фиксированного размера

Однако мне нужно использовать это для HTML-элемента, который динамически создается на стороне сервера. Пример,

Я создаю все элементы, преобразую их в HTML, а затем возвращаю их как массив строк Json в основном (в форме HTML) во внешний интерфейс:

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

А затем на переднем конце я добавляю их к div в Jquery следующим образом:

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

Теперь это работает нормально, но как мне тогда вызвать плагин JQuery для каждого из этих элементов, который добавляется для форматирования размера текста внутри одного из divs в элементе?

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, вероятно, придется структурировать соответствующим образом. Также основанный на крошечном тесте , похоже, что плагин не работает правильно при вызове коллекции 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?

Не совсем. Мои изменения означают, что вы сможете заменить

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

с

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

Answer 2

Похоже, это может быть задание для livequery , которое позволяет запускать функцию при динамическом добавлении элемента в DOM.

Answer 3

Вы можете использовать событие .load (), чтобы добавить плагин, когда элементы dom добавляются динамически. 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);
}