Button click event won't fire on first click, but always fires on subsequent clicks

Question

I have a large-scale asp.net project that I'm working on (new to ASP.NET), and I have a problem with some dynamically added buttons not firing their click events on the first click. What's weird is that this doesn't always happen; sometimes they work just fine on the first click, and other times if I run the project and follow exactly the same steps the button won't work on the first click.

Here's some background...

The page that's problematic is used to deploy different versions of some content to clients. The page has an UpdatePanel that contains a bunch of tables, and only one of them is visible at any given time. Each table represents a different "screen" of a wizard-like workflow. So when the page is loaded, the first table is visible and all others are not, and the first page has a radio button list with deployment types and a Continue button. When the Continue button is clicked, some data is loaded for the next "screen" and the first table is made invisible and the next table is made visible.

So now that you have some background, on to the problem...

One of these tables has an empty Accordion on it, and when the previous "screen"'s Continue button is clicked, the Accordion is populated dynamically with data from the DB; there's one pane for each major version and each pane has a table in it with one row for each minor version. Each of these rows has the Version Number, the Deployment Status, and an Action button that lets the user Deploy the version, or if its already deployed they can Redeploy. Anyways, these action buttons are the ones that I have a problem with where they sometimes don't work on the first click. Like I said, the buttons are created in the click event from the Continue button on the previous "screen", and I set the ID of each button, and link the event up to the click event at the time the button is created. I can debug over this and see the event handlers being added with no problem, but then when I click the button the first time (and this is actually not consistent; sometimes they work on the first time!) they don't do anything, but on the second click they work normally. I have a method called something like populateAccordion() that is responsible for actually loading the data from the DB and creating these records with buttons in them. I call this method on page_load if it's a postback, but only if the cached selections from previous "screens" are not null (ie I cache a subjectId and centerId on previous "screens" and only load the Accordion data if those are not null).

This is a little too complicated to post code for, but does anyone have any ideas what could be going wrong, or how I could figure this out? I've done quite a bit of debugging, and my populateAccordion() is always called properly on the previous screen's Continue button click, and on every page_load after that, and the Click events are always wired up right when the buttons are created in that method, so I can't figure out why the click events wouldn't fire on the first try.

The problem is similar to the one mentioned in this post...

https://stackoverflow.com/a/2784140/1246574

But I am definitely setting the IDs for all of my buttons, so the solution mentioned in that post isn't the fix for my problem.

I've also read quite a few other posts that say to move your code from Page_Load to Page_PreRender, but that doesn't change anything in this case; it acts exactly the same.

I also tried setting the buttons' UseSubmitBehavior = false, but no luck.

Thanks!

Answer 1

This is probably a latency issue. It sounds like you're able to click the controls before the page has fully loaded all the JS. Is there an onload() function in there? Perhaps you could try hiding the controls until the page has finished loading?