Question

我正在开发一项服务，允许用户创建团队和挑战，以及个人帐户。每个团队和挑战都有一个唯一的“ownerID”，每个用户都有一个“userID”。主用户启动页面由三个手风琴组成：团队，挑战和设置，选择后，它们会显示一系列按钮。单击按钮后，将使用单独页面中的数据填充空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

我不确定我是否理解正确，但这是一个解决方案 - 如何将事件附加到已加载内容的特定元素：

$(ElementWhichContainsLoadedContent).on('click', 'ButtonSelector', function()
{
    // Your code
});

Answer 2

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

但是，使用ajax回调创建函数和绑定应该可以解决问题。

Answer 3

因为我正确地理解了你的问题，所以应该使用jQuery的delegate方法的确切情况：jQuery delegate method。文档说明：

根据一组特定的根元素，将处理程序附加到与选择器匹配的所有元素的一个或多个事件，现在或将来。

在jQuery 1.7之前有一个名为live的方法，但现在它已被弃用，所以你应该使用delegate

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

3 个答案: