__doPostBack trigger on html render from javascript(before real click)

Question

I'm trying to create some new buttons from js like:

var nextYearList ="";

...
nextYearList += "<button type='button' customparam='" + newCatalogList[l].code + "|" + newBaseName + "' ><span class='catName'>" + newCatalogList[l].name + "</span><span class='catYears'>" + newCatalogList[l].startDate + " - " + newCatalogList[l].endDate + "</span></button>";
...
ok('#YearNavigation .panelNextYear')[0].innerHTML = nextYearList;

var xListYears = ok('.panelNextYear button[customparam]');
for (var f = 0; f < xListYears.length; f++)
{
     xListYears[f].addEventListener('click', changeCatalogPostback(xListYears[f].getAttribute('customparam'),true));
}

Where ok is my document.querySelectorAll wrapper;

ok = function (model)
{
    return document.querySelectorAll(model);
};

changeCatalogPostback= function (parameter,checker)
{
    if(checker)
        __doPostBack('changeCatalog',parameter);
};

The main problem is that my __doPostBack is triggered on html rendering... so bye bye current page...

So how can I avoid a __doPostBack trigger on html render from javascript? I really need it to be there but working on click and not on render...

Answer 1

When you are adding an event listener you are actually calling the function which returns undefined and makes a postback. So if you will remove a __doPostBack call from changeCatalogPostback function the line with addEventListener call would evaluate to the end and will be equal to:

 xListYears[f].addEventListener('click', undefined);

Instead addEventListener should accept a function as a second parameter. Use a bind call:

xListYears[f].addEventListener(
    'click', 
    changeCatalogPostback.bind(this, xListYears[f].getAttribute('customparam'), true));