1

jQuery のタブ付きインターフェイスを使用して、ajax を使用して Facebook アプリケーションのビューを切り替えています。tab1 と tab2 の 2 つのタブがあり、どちらにも form のボタンがあります。

問題は、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 経由で読み込まれるため、ドキュメントの準備が整った時点では (おそらく) 存在しません。

loadクリックバインディングを配置する場所のjQueryタブにイベントがあります

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 に答える