0

我正在开发一项服务，允许用户创建团队和挑战，以及个人帐户。每个团队和挑战都有一个唯一的“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 文件中持空白。一如既往，我们将不胜感激任何帮助。

4

3 回答 3

1

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

$(ElementWhichContainsLoadedContent).on('click', 'ButtonSelector', function()
{
    // Your code
});
于 2012-07-17T21:00:58.103 回答
1

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

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

于 2012-07-17T21:04:17.367 回答
1

delegate正如我正确理解您的问题，这正是应该使用 jQuery 方法的确切情况： jQuery 委托方法。文档中的描述：

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

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

于 2012-07-17T21:14:44.010 回答