best way to attach event handlers for 5000 items?

Question

I know that there are some similar questions about perfomance of jquery click events, but I am not really satisfied, as it does not match the conditions of my certain enviroment.

The environment: On a internal web app project I have a selectbox replacement, which provides a search through the options, including hidden values. E.g. search an article by its manufacturer, its name, its unit size, or article number or EAN (which is represented by the options value) The number of options can be just 12 or 5.000 (tested working with upto 120.000 options on desktop, upto 5.000 on mobile)

The HTML

<ul id="selectbox" class="fr softmenu fr" style="margin: 0px; visibility: visible;">
    <li class="list_header">
        <span class="title">t2s_test</span>
        <button class="close"></button>
        <input class="t2s t2s_init" placeholder="type to search" type="text" value="lor ips dol">
        <button class="t2s_delete"></button>
        <button class="t2s_fulltext"></button>
    </li>
    <li class="list iscroll" scroller="0">
        <ul class="list iscroll" style="transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);">
            <li t2s="592 ipsum dolor nascetur pede vivamus" data-value="592">augue rhoncus condimentum lorem libero</li>
            <li t2s="1234 lorem ipsum dolor ultricies nisi" data-value="1234">maecenas blandit odio quis ante</li>
            <li t2s="2366 dolor nulla quis semper lorem" data-value="2366">tellus phasellus metus ipsum nullam</li>
            <li t2s="3232 dolor pede tincidunt vulputate eleifend" data-value="3232">lorem nisi ipsum ante amet</li>
            <li t2s="4621 lorem ipsum dolor amet sem" data-value="4621">consequat nulla ullamcorper nisi condimentum</li>
            <li t2s="4977 dolor dis nascetur donec cras" data-value="4977">lorem augue sed ipsum sit</li>
        </ul>
    </li>
</ul>

Here the javascript filter function (shortened)

var res = $(ui.var.t2s_backup).filter(function() {
    // --- processing filter 
});
if (vl && t==0) { // --- input not empty, but no results ?
    ul.html('<li class="t2s_fulltext">No results. Perform fulltext search instead ?</li>');
}
else ul.html(res); // --- display results, ul is variable name of $('ul.softmenu > li.list > ul.list')

To bind the click events on the list elements, currently I am doing it this way (variant 1.1)

$(document).click(function(e){
    var el = $(e.target);
    if (el.is('ul#selectbox.softmenu ul.list > li')) {
        // --- do things
    }
});

or this way (which seems to be a bit faster, I will replace it soon) (variant 1.2)

$(document).on('click','ul#selectbox.softmenu ul.list > li',function(e){
    var el = $(e.target);
    // --- do things
});

But I think, it is a bad idea, to bind the click event to each single list item, once the list is loaded (keep in mind, there may be some thousends of it) (variant 2)

$(document).ajaxComplete(function(e){
    $('ul#selectbox.softmenu ul.list > li').click(function(e) {
        // --- do things
    });
});

or to bind the click event to each list item, once the filter function is performed, like (variant 3)

var res = $(ui.var.t2s_backup).filter(function() {
    // --- processing filter 
});
if (vl && t==0) {
    ul.html('<li class="t2s_fulltext">No results. Perform fulltext search instead ?</li>');
}
else {
    ul.html(res);
    ul.find('> li').click(function(){
        // --- do things
    });
}

Which variant provides the best performance and the smallest browser memory load ? Also please keep in mind, that variant 2 and 3 must be combined, var2 for "don't need to search, want to click directly on item" and var3 for "needed to perform search and item found." Thanks for answers.