Reputation: 580
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...
Upvotes: 0
Views: 307
Reputation: 3203
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));
Upvotes: 1