i want to append button on dynamically generated classes

Question

I am adding button into div by jQuery Selector,and open dialog on button click.

$(".item-box .product-item .picture").each(function ()
{
var productId = $(this).closest(".product-item").data("productid")
$(this).append(" + productId + "' title='QuickView' class='button-2 quickView' onclick='javascript:void(0);return false;'>quickview");
});

but this is not work in infinity scrolling, if new class added dynamically on scrolling then button not append on new added classes.

 

Then i am using jquery scroll event listener to append button on new added class on scroll.

document.addEventListener('scroll', function (event)
{
$(".item-box .product-item .picture").each(function ()
{
if ($(this).children().hasClass("quickView") == false)
{
var productId = $(this).closest(".product-item").data("productid")
$(this).append(" + productId + "' title='QuickView' class='button-2 quickView' onclick='javascript:void(0);return false;'>quickview");
}
});
});

it is work fine but this affect on performance due to many time call on every scroll event it decrease the speed, and dialog box is open very slowly.

 

So is there any other way to implement this feature.