Question

我使用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>

Answer 1

事件正在文档准备就绪，所以我假设可能按钮不存在呢？你说标签是通过ajax加载的，所以它们（可能）在文档准备就绪时不存在。

jQuery标签中有load的事件，你应该点击你的点击

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

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

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

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

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

使用AJAX的jQuery选项卡式UI - 按钮的事件处理程序不再有效

1 个答案: