0

IDとクラスが空の単一のHTMLページがあります。これらは、ajax get リクエストによって返されたデータによって埋められます。したがって、ユーザーはアプリをサインイン ページ、ホームページ、オファー ページ、およびイベント ページとして表示します。ログインに成功すると、ホームページが表示されます。ログインに成功すると、ユーザーはホーム、オファー、イベントの画像アイコンであるフッターを見ることができます。HTML ページ内の要素は、shown or hiddenユーザーが画像アイコンをクリックしてナビゲートしたいページに基づいています。

私の問題は次のとおりです: Ialready have offers, and eventsの場合、他のページからこれらのページに移動しても問題はありませんが、もしあればone of these is empty、空のコンテンツ ページから (いくつかのコンテンツを含む) ページに移動するとdo not occur、click event. そして、なぜこれが起こっているのかを調べようとしていますか？

たとえば、空のオファー ページから、いくつかのイベントが既にデータベースにあるイベント ページに移動すると、イベント コンテンツが読み込まれますが、

  • ヘッダーは変更されません。ヘッダーには引き続きオファーが表示されますが、内容はイベントです。
  • 画像アイコンは変更されません。通常の画像とクリックオーバー画像があります。イベントではなく、クリックオーバー画像が引き続き提供されます。

ただし、これらのページが両方とも空であるか、何らかのデータがある場合、

  • ヘッダーは正常に変更されます。
  • 画像アイコンは正常に変化します。

以下はjqueryクリックイベントスクリプトです

$(".fevent").live('click', function(){
    $.ajax({
        url: 'http://192.168.3.100:3000/events.json?playerid='+$('#playerid').html(),
        type: "get",
        cache: false,
        success: function(data) {   
            //keep the element is always empty first before loading anything into it
            $('#events_table').html('');

            //fill the table with offers
            $.each(data, function(index, event) {
                if (event['read'] == 1){
                    $('#events_table').append('<tbody><tr class="event_list"><td class="spacer"><img alt="Spacer" src="css/images/spacer.png"></td><td class="image"><img height="60px" src="css/images/'+ event['code'] +'e.png" width="60px"></td></td><td class="description"><h3>'+ event['description']+ '</h3><p>Start Date: '+ month[(new Date(event["startdate"])).getMonth()] + ' ' + (new Date(event["startdate"])).getDate() +', '+ (new Date(event["startdate"])).getFullYear() +'</p><p>End Date: '+ month[(new Date(event["enddate"])).getMonth()] + ' ' + (new Date(event["enddate"])).getDate() +', '+ (new Date(event["enddate"])).getFullYear() +'</p></td></tr>');
                }
                else {
                    $('#events_table').append('<tbody><tr class="event_list_unread"><td class="spacer"><img alt="Spacer" src="css/images/spacer.png"></td><td class="image"><img height="60px" src="css/images/'+ event['code'] +'e.png" width="60px"></td></td><td class="description"><h3>'+ event['description']+ '</h3><p>Start Date: '+ month[(new Date(event["startdate"])).getMonth()] + ' ' + (new Date(event["startdate"])).getDate() +', '+ (new Date(event["startdate"])).getFullYear() +'</p><p>End Date: '+ month[(new Date(event["enddate"])).getMonth()] + ' ' + (new Date(event["enddate"])).getDate() +', '+ (new Date(event["enddate"])).getFullYear() +'</p></td><td class="mark_as_read"><img alt="Unread1" class="unread" src="css/images/unread1.png"><p class="read" style="display:none">events/'+event["id"]+'</p></td></tr></tbody>');    
                    $('#total_bulbs').html(event['total_bulbs']);
                }
                count_bulbs = count_bulbs + parseInt(event['total_bulbs']);
            });

            //working fine
            $('#signin_content').hide();
            //working fine
            $('#signin_header').hide();
            //working fine
            $('.submitimg').hide();
            //working fine
            $('#player_header').show();
            //working fine
            $('#player_content').hide();
            //working fine
            $('#offers_content').hide();
            //working fine
            $('#footer').show();
            //working fine
            $('#events_content').show();

            //*******************this is the header and it is not changing**************************
            $('.alignleft').html('Events');

            $('.fhome').html('<img alt="Home" class="footer_img" src="css/images/home.jpg" width="100%">');
            $('.foffer').html('<img alt="Offers" class="footer_img" src="css/images/offers.jpg" width="100%">');

            //****************this is not changing also****************************
            $('.fevent').html('<img alt="Events" class="footer_img" src="css/images/eventsover.jpg" width="100%">');

        }//end of fevent success
    });//end of fevent ajax
    $( "[data-position='fixed']" ).fixedtoolbar( 'updatePagePadding' );
});//end of fevent

以下は私のヘッダーです：

 <div data-role="header" data-tap-toggle="false" data-position="fixed" id="player_header" style="display:none">
    <img alt="Header" src="css/images/header.jpg" width="100%" class="headerimg">
    <div class="ui-bar">
        <h3 class="alignleft"></h3>

        <div class="alignright" id="home_notification"><img alt="Redlight" height="31px" src="css/images/redlight.png" class="notification_img" width="35px"></div>
        <div style="clear: both;"></div>

    </div>
</div>

以下は私のフッターです

 <div id="footer" style="display:none">
    <ul>
        <li class="fhome"><img alt="Home" class="footer_img" src="css/images/home.jpg" width="100%"></li>
        <li class="foffer"><img alt="Offers" class="footer_img" src="css/images/offers.jpg" width="100%"></li>
        <li class="fevent"><img alt="Events" class="footer_img" src="css/images/events.jpg" width="100%"></li>
        <li class="fpromo"><img alt="Promo" class="footer_img" src="css/images/promo.jpg" width="100%"></li>
        <li class="fnews"><img alt="News" class="footer_img" src="css/images/news.jpg" width="100%"></li>
    </ul>

</div>
4

1 に答える 1

0

. ライブは非推奨です。使ってみてください。代わりに..

$(function() {
    $(".fevent").on('click', function(){

});

また、コードがDOM Readyイベント内にあることも確認してください.F12ボタンを押して、最初にリクエストが送信されているかどうかをブラウザで確認してください

于 2012-09-20T22:13:54.973 に答える