Question

I’m developing a service which allows users to create teams and challenges, as well as individual accounts. Each team and challenge has a unique “ownerID” and each user has a “userID”. The main user splash page consists of three accordions: Teams, Challenges and Settings, which, upon selection, display a series of buttons. After clicking a button, an empty div is populated with data from a separate page. And then I run into the aforementioned problem. After loading the external page data for challenges, which contains a drop down list and either a user join or team join button dependent on the selection. The problem is, I want to be able to click on either button and then call a function, but, I can’t say:

$('#userJoin').on("click", function() {
                var challengeID = $('#challengeSelect').val();
                var userID = $('#userID').val();
                if (challengeID != 0 && userID != 0) {
                    joinUserToChallenge(challengeID, userID);
                }
            });

I’m assuming this is because that function currently lives in the document.ready section, but I’m drawing a blank on how to integrate this into the JS file. Any help would be greatly appreciated, as always.

Answer 1

This function should work, if you put it in the callback for the ajax code that loads the content with your buttons. .on() will only recognize elements that are in the DOM when the page is loaded, and won’t catch inserted elements, unless you tag it to a parent that exists when the page is loaded.

However, creating the function and binding with the ajax callback should take care of the problem.