标签：javascript jquery css jquery-mobile

我正在使用jQuery Mobile库开发一个移动网站.我在主页上有一个页眉,页脚和内容区域,所有链接都使用以下代码加载到内容区域中：

$("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);

除jQuery Mobile样式不适用于以这种方式包含的内容外,此方法工作正常.例如,主页包含按钮：

<a href="?Inventory" data-role="button">Inventory</a>

但是,当我将该页面异步加载到内容div中时,链接不会显示为按钮.有没有办法告诉jQuery Mobile每次重新加载#content时都应用移动样式？

解决方法:

你当然可以.您想使用.trigger(‘create’)初始化任何jQuery Mobile小部件：

$("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 :)
    });
});

请注意,您在要初始化的小部件的父元素上调用.trigger(‘create’).还要注意,由于要通过异步函数加载内容,因此需要在.load()调用的回调函数中调用.trigger(‘create’),以便在尝试初始化元素时实际上存在要初始化的元素.

另外,有时您可能会遇到小部件已初始化但又更改了HTML并想刷新小部件的问题.有执行此操作的功能,例如：.listview(‘refresh’)、. slider(‘refresh’)等.

我刚刚回答了一个有关需要初始化或刷新的小部件的问题：how to refresh jquery mobile listviews

另外,您还需要将.click()更改为.delegate(),以便通过AJAX加载的链接也将附加以下事件处理程序：

$('#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 :)
    });
});

标签：javascript,jquery,css,jquery-mobile
来源： https://codeday.me/bug/20191012/1897330.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。