1

我正在使用 jQuery 选项卡式界面在使用 ajax 的 Facebook 应用程序的视图之间切换。我有两个选项卡-tab1 和 tab2，它们都有表单的按钮。

问题是，当我转到 tab1 并单击按钮时，它们不起作用。如果我然后转到 tab2，该页面上的按钮将起作用。如果我然后回到 tab1 按钮在那里工作。反过来也会发生同样的情况：如果我先转到 tab2 并单击它们不起作用的按钮，但如果我转到 tab1 它们确实起作用。返回到 tab2，按钮现在可以工作了。

有谁知道为什么会发生这种情况？

编辑：下面是页面代码的精简版本。事件处理程序当前位于标头中。不过，我已经尝试过将它们放在身体的底部。

    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
            <title>Profile Page</title>
            <link href="../css/profilepage_s.css" rel="stylesheet" type="text/css"/>
            <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
            <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />

            <!-- Importing javascript configuration file and library of functions to call Facebook features -->
            <?php include('../../config_js.php'); ?>
            <script type="text/javascript" src="../js/facebookFeatures.js"></script>

             <!-- This is all jQuery code -->
            <script type="text/javascript">
                $(document).ready(function (e) {
                    <!-- Converts Link into button -->
                    //$("#thisIsAButton").button();


                    <!-- Updates the user's shortlist with id of this person -->
                    $("#updtShortlistBtn").click(function () {
                        alert("I'm in");

                        //$(this).hide();

                        $.get('../Scripts/updateShortlist.php', 'uid=<?php echo $uid?>&targ_id=<?php echo $targ_id?>');
                    }); 
                });
            </script>​​​

        </head>
        <body>

        <div id="container">

            <a id="thisIsAButton" href="../View/edit_profile.php">go to page 4</a>

            <?php //echo $targ_id ?>

            <!-- Displays the Profile Picture -->
            <div id="profile_pic">
                <img src="<?php echo $picture ?>"/>
            </div>

            <!-- Displays list of comparisons-->
            <div id="comparison"></div>
            <div id="bio"><?php //echo $bio ?></div>

            <!-- Show different views if user is viewing their own profile or another user's profile -->
            <!-- These features should only be available if the user is viewing their own profile -->
            <?php 

                if ($activeUsersProfile){ ?>
                    <!-- Edit Profile Button -->
                    <div id="editProfileBtn">
                        <button data-pagelink="../View/edit_profile.php">Edit Profile</button>
                    </div>

                    <!-- Button to publish a summary of user's app profile to their Facebook profile -->
                    <div id="publishBtn">
                        <input type="button" value="Publish Profile" onclick="publishToWall(<?php echo $targ_id ?>)"/>
                    </div>

            <?php } else { ?>

                            <!-- Displays Send Message Button and Update shortlist button -->
                    <div id="sndBtn">
                            <button type="button" id="updtShortlistBtn">Say 'Hey'!</button>
                    </div>  
<?php } ?>
            </div>
        </body>
    </html>

编辑： 

$(document).ready(function (e) {

                $(document).on('click', '#updtShortlistBtn', function () {

                alert("I'm in");
                 $.get('../Scripts/updateShortlist.php', 'uid=<?php echo $uid?>&targ_id=<?php echo $targ_id?>');
            });

            });

EDIT2：抱歉，在尝试缩短示例代码时，我取出了一些没有 jQuery 的按钮，例如下面的按钮。我现在意识到这对于找到解决方案可能很重要！

// Calls a method in the facebookFeatures.js file linked at top
<button type="button" id="sndMessageBtn" onclick="sendMessage(<?php echo $targ_id ?>)">Send Message</button>
4

1 回答 1

1

事件被绑定到文档准备就绪，所以我假设按钮可能不存在？您说选项卡是通过 ajax 加载的，因此在 document ready 触发时它们（可能）不存在。

在 jQuery 选项卡中有一个事件load，你应该把你的点击绑定放在哪里

http://jqueryui.com/demos/tabs/

$('#tabs').tabs({
    load: function() {
        $("#updtShortlistBtn").click(function () { /* do Stuff */ });
    }
});

或者，您可以使用委托处理程序绑定到文档：

$(document).on('click', '#updtShortlistBtn', function () {
    //do Stuff
});

这样，按钮何时存在都无关紧要......处理程序绑定到文档并且事件冒泡处理问题

于 2012-08-30T21:25:44.970 回答