javascript - 使用 Ajax 调用加载外部页面后如何附加事件处理程序？

Question

我正在开发一项服务，允许用户创建团队和挑战以及个人帐户。每个团队和挑战都有一个唯一的“ownerID”，每个用户都有一个“userID”。主用户初始页面由三个 Accordion 组成:团队、挑战和设置，选择后会显示一系列按钮。单击按钮后，空 div 中将填充来自单独页面的数据。然后我遇到了上述问题。加载挑战的外部页面数据后，其中包含一个下拉列表以及取决于选择的用户加入或团队加入按钮。问题是，我希望能够单击任一按钮，然后调用函数，但是，我不能说:

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

我假设这是因为该函数当前位于 document.ready 部分中，但我对如何将其集成到 JS 文件中一无所知。一如既往，任何帮助将不胜感激。

Answer 1

如果您将其放入使用按钮加载内容的 ajax 代码的回调中，则该函数应该可以工作。 .on() 只会识别页面加载时 DOM 中的元素，并且不会捕获插入的元素，除非您将其标记到页面加载时存在的父元素。

但是，创建函数并与 ajax 回调绑定(bind)应该可以解决这个问题。