调用了jquery click事件，但未执行某些DOM操作

Question

I have a single html page the id's and class'es are empty. They are filled by the data returned by ajax get request. So, users see the app as signin page, home page, offer page, and events page. On successful login, they see a home page. Only after the successful login, users will be able to see the footer, which are the image icons for home, offers and events. The elements inside the html page is shown or hidden based on what page user want to navigate by clicking on the image icons.

My issues are: If I already have offers, and events , then navigating to these pages from any other page will not be a problem, but if any one of these is empty , then navigating to the page (that has some content) from an empty content page, some of the jquery manipulations do not occur on click event . And, I am trying to find out why this is happening?

Say, from empty offer page to event page with some events already in the database, The events content gets populated, but

• The headers will not change. The headers will still say offers, but the content is of events.
• The image icons would not change. I have normal and click-over images. The click-over image will still be of offer, not the event.

But, if both of these pages are either empty or have some data,

• The headers change normally.
• The image icons change normally.

Below is the jquery click event script

$(".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

The following is my header:

 <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>

and the following is my footer

 <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>

Answer 1

. live is deprecated.. try using . on instead..

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

});

Also make sure your code is inside the DOM ready event.. Check in the browser whether you see a request being sent in the first place by hitting the F12 button