Question

我有一个jquery移动页面的代码。当我直接运行它时，它可以工作，但是当我从另一个页面链接到它时，它不会加载。我尝试在引用链接中关闭数据-ajax，但这没有任何区别。有什么想法吗？

这是代码：

var urlQuery = location.search;
urlQuery = urlQuery.replace('?', '');
var split = urlQuery.split('=');
var id = split[1];

$(document).delegate('[data-role="page"]', 'pageinit', function(){
    $.get('../ws/bars.php?id=' + id, function(data) { 
        $('[data-role="content"]').html(data);
        $('[data-href="specials"]').trigger('click');
    });
});


$(document).delegate('[data-role="navbar"] a', 'click', function(event){
    $('.content_div').hide(); // hide all the .content_div's
    $('#' + $(this).attr('data-href')).show(); // display the div that's been clicked   $('a.pageTab').removeAttr('style'); // remove styling from the buttons
    $(this).attr('style','color: #eee;'); // add styling to the active button
});

无论我从中得到什么答案，请告诉我为什么以及为什么我能理解这里发生了什么。

谢谢！

Answer 1

您的初始$.get()函数调用似乎在全局范围内运行。这意味着它在页面加载时运行，但在后续页面加载时不运行，因为jQuery Mobile通过AJAX将外部页面拉入同一个DOM。因此，要为每个伪页面运行AJAX请求，我将绑定到pageinit事件：

$(document).delegate('[data-role="page"]', 'pageinit', function () {
    //run AJAX request
});

此外，如果每个页面上的元素都包含以下ID，#sun / #mon /等。然后你应该把它们改成类或者以某种方式使它们成为唯一的，这样你就不会在DOM中同时使用相同的ID来拥有多个元素。您可以使用$.mobile.activePage参考：

轻松选择当前页面上的元素

$.mobile.activePage.find('.sun')...

动态内容未加载jquery mobile

1 个答案: