Question

我有一个使用$.get()从外部文件加载的无序列表。加载后，需要在页面加载时使用.show()（显示：无;默认情况下）操作无序列表。

在阅读了很多解释后，我理解为什么show()没有处理加载的内容。他们说你需要使用live()（好吧，现在是.on()）将一个处理程序附加到一个事件，但所有的例子都是点击和鼠标悬停的东西。

Ajax电话：

$.get('/wordpress/wp-content/themes/nascar_plaza/inc/sidebar_login.php', function(data) {
    $('#site-header-nav-container > ul > li:last-child').append(data);
});

jQuery在加载的内容上运行：

$('.current-menu-ancestor .sub-menu').css({
    display: 'block',
    width: '235px'
});
$('.current-menu-ancestor .sub-menu li').show();

有人可以举例说明如何在加载内容后运行上面的代码吗？

Answer 1

就像你说的那样：“在它加载后运行”

var url = '/wordpress/wp-content/themes/nascar_plaza/inc/sidebar_login.php'

$.get(url, function(data) {

    //anything in this block runs after the ajax call

    $('#site-header-nav-container > ul > li:last-child').append(data);

    $('.current-menu-ancestor .sub-menu').css({ 
        display: 'block', 
        width: '235px' 
    }); 

    $('.current-menu-ancestor .sub-menu li').show(); 

});

Answer 2

代码的第二部分（css操作和显示列表）应该放在回调函数中，该函数在加载数据后运行。

$.get('/wordpress/wp-content/themes/nascar_plaza/inc/sidebar_login.php', function(data) {

   $('#site-header-nav-container > ul > li:last-child').append(data);

   $('.current-menu-ancestor .sub-menu').css({
       display: 'block',
       width: '235px'
   }).find('li').show();

});

AJAX加载内容的jQuery函数

2 个答案: