Why doesn't the jQuery image resizing library work on Ajax loaded blocks?

Question

JavaScript

There is a JavaScript library for image resizing - jQuery NailThumb , which works well.
It looks like this:



The picture has risen to the size.

But loaded by ajax, the library does not respond to them. That is, the indicator stands, but the library does not work with it.



The question is how can we solve the problem so that the library is launched once when the page is loaded, while it is necessary that every time .appened('
The code itself:

<script>
jQuery(document).ready(function() {
                jQuery('.nailthumb-container').nailthumb({method:'resize',fitDirection:' center'}); //width:166,height:79,
            });
</script>

function addTovar (val){
    // добавляет товар
//    alert(val.image)
    var block = $('#tovar_block');
    block.append('' +
        '<li class="catalog-elements-ul-li parent">' +
        '   <div class="catalog-elements-ul-li-photo">' +
        '       <a href="#" class="nailthumb-container">' +
        '           <img src="/img/product/smal/'+val.art+'_0.jpg.jpg">' +
        '       </a>' +
        '       <div class="tovar-sravni">' +
        '           <input type="checkbox" name="check">' +
        '       </div>' +
        '   </div>' +
        '   <div class="catalog-elements-ul-li-name">' +
        '       <a href="#" class="catalog-elements-ul-li-name-link">'+val.name+'</a>' +
        '       <span class="catalog-elements-ul-li-name-text">'+val.title+'</span>' +
        '       <div class="catalog-elements-ul-li-name-el">' +
        '           <a href=""><strong>Отзывы</strong> <span>4</span></a>' +
        '           <a href=""><strong>Описание</strong></a>' +
        '           <a href=""><strong>Фото</strong></a>' +
        '       </div>' +
        '   </div>' +
        '   <div class="catalog-elements-ul-li-add">' +
        '       <span class="tovar-list-price">'+val.price+' <span>₷</span></span>' +
        '       <div class="tovar-star parent">' +
        '           <span class="star-on"></span>' +
        '           <span class="star-on"></span>' +
        '           <span class="star-on"></span>' +
        '           <span class="star-on"></span>' +
        '           <span class="star-on"></span>' +
        '       </div>' +
        '       <span class="code-tovar">Код товара: '+val.art+'</span>' +
        '       <button id="catalog-add">В корзину<span></span></button>' +
        '   </div>' +
        '</li>');

}

Answer 1

easy way first try

Spoiler

function addTovar (val){
    // добавляет товар
//    alert(val.image)
    var block = $('#tovar_block');
    block.append('' +
        '<li class="catalog-elements-ul-li parent">' +
        '   <div class="catalog-elements-ul-li-photo">' +
        '       <a href="#" class="nailthumb-container">' +
        '           <img src="/img/product/smal/'+val.art+'_0.jpg.jpg">' +
        '       </a>' +
        '       <div class="tovar-sravni">' +
        '           <input type="checkbox" name="check">' +
        '       </div>' +
        '   </div>' +
        '   <div class="catalog-elements-ul-li-name">' +
        '       <a href="#" class="catalog-elements-ul-li-name-link">'+val.name+'</a>' +
        '       <span class="catalog-elements-ul-li-name-text">'+val.title+'</span>' +
        '       <div class="catalog-elements-ul-li-name-el">' +
        '           <a href=""><strong>Отзывы</strong> <span>4</span></a>' +
        '           <a href=""><strong>Описание</strong></a>' +
        '           <a href=""><strong>Фото</strong></a>' +
        '       </div>' +
        '   </div>' +
        '   <div class="catalog-elements-ul-li-add">' +
        '       <span class="tovar-list-price">'+val.price+' <span>₷</span></span>' +
        '       <div class="tovar-star parent">' +
        '           <span class="star-on"></span>' +
        '           <span class="star-on"></span>' +
        '           <span class="star-on"></span>' +
        '           <span class="star-on"></span>' +
        '           <span class="star-on"></span>' +
        '       </div>' +
        '       <span class="code-tovar">Код товара: '+val.art+'</span>' +
        '       <button id="catalog-add">В корзину<span></span></button>' +
        '   </div>' +
        '</li>');
        jQuery('.nailthumb-container').nailthumb({method:'resize',fitDirection:' center'});
}

Answer 2

jQuery(document).ready(function() {
jQuery('.nailthumb-container').nailthumb({method:'resize',fitDirection:' center'}); //width:166,height:79,
});

If you understood everything correctly, then in addition to the ready event, you need to hang the resize function on the appened event.