jQuery Mobile styles for an asynchronously included div

后端 未结 1 1731
眼角桃花
眼角桃花 2021-01-22 05:57

I\'m developing a mobile website using the jQuery Mobile library. I have a header, a footer and a content area on the main page, and any links are loaded into the content area u

相关标签:
1条回答
  • 2021-01-22 06:33

    You sure can. You want to use .trigger('create') to initialize any jQuery Mobile widget:

    $("a").click(function() {
        var toLoad = $(this).attr('href');
    
        // Loading image
        $('#content-body').html('<table class="loader"><tr><td><img src="<?php echo SITE_ROOT; ?>/img/ico/loader.gif" /></td></tr></table>');
    
        $('#content-body').load(toLoad, function () {
            $(this).trigger('create');//it's that easy :)
        });
    });
    

    Note that you call .trigger('create') on the parent element of the widget you want to initialize. Also note that since you are loading content through an asynchronous function you will need to call .trigger('create') in the callback function for your .load() call so that the elements to initialize are actually present when you try to initialize them.

    Also you can sometimes run into an issue where the widget has been initialized but then you changed it's HTML and want to refresh the widget instead. There are functions to do this such as: .listview('refresh'), .slider('refresh'), etc.

    I just answered a question regarding widgets needing to be initialized or refreshed: how to refresh jquery mobile listviews

    Also you will want to change that .click() to a .delegate() so the links that are loaded via AJAX will also have this event handler attached:

    $('#content-body').delegate('a', 'click', function() {
        var toLoad = this.href;//no need to use jQuery here since `this.href` will be available in all major browsers
    
        // Loading image
        $('#content-body').html('<table class="loader"><tr><td><img src="<?php echo SITE_ROOT; ?>/img/ico/loader.gif" /></td></tr></table>');
    
        $('#content-body').load(toLoad, function () {
            $(this).trigger('create');//it's that easy :)
        });
    });
    
    0 讨论(0)
提交回复
热议问题