I want to create an element on the fly, like this way:
var productItemTop = $(
"<span>" +
"<a class='spamItemsX' href='#' " +
"onclick=" +
eval(launchGenericProductSearch(topProducts)) +
">" +
topProducts +
"</a>" +
"</span>"
);
But every time I load the page, the function launchGenericProductSearch is get called, but I don't want it to be called then, but when the link is clicked.
Indeed, launchGenericProductSearch will be executed immediately, not when the user clicks.
You will get better control over your code when you use jQuery to the full, avoid eval, and bind click handlers not via HTML, but via JS (jQuery) code:
var productItemTop = $("<span>").append(
$("<a>").addClass('spamItemsX')
.attr("href", '#')
.click(() => launchGenericProductSearch(topProducts))
.text(topProducts)
);