Question

我搜索了类似的问题，但没有运气。

如果我用ajax向DOM添加元素，我无法控制它。我知道，live方法适用于事件，但我只是想显示/淡化它。

有没有办法控制那些？

$("#menu > div > ul > li > a").click(function(){
    var page = $(this).attr("href").replace('#','');
    $.ajax({
        url: page + '.php',
        beforeSend: function() { $("#page").fadeOut(); $('#loader').fadeIn("slow"); },
        complete: function() { $('#loader').fadeOut(); },
        success: function(data){
            $('body').append(data);
            $(data).show();
        }
    });
});

数据包含以下内容及其字符串;

<div id="container-01"> <div class="left"> left </div> <div class="right"> right </div> </div>

谢谢。

Answer 1

如果您将所有已加载的内容放入包装器元素并尝试切换此包装器，我认为您会更好。就像：

...
success: function(data){
            $('#mywrapper').html(data);
            $('#mywrapper').show();
        }
...

这假设您的数据是HTML，顺便说一句。

编辑：看到您传递的数据，您可以轻松地执行此操作：

...
success: function(data){
            $('body').append(data);
            $('#container-01').show();
        }
...

这需要一个#container-01{display:none;}样式规则，但我想这应该没问题。

Answer 2

我不知道如何解释这一点。但是我在this link找到了可以解决你问题的东西。

Answer 3

是的，您需要在回调函数上执行此操作，您将获取数据，然后执行fadein。但是你可能需要在淡入淡出之前先隐藏内容。你也可以隐藏容器div并执行.load来加载html然后在回调上淡化。

所以试试这个：

wrapper = $('<div class="wrapper">')
$("body").append(wrapper)
$(wrapper).hide().html(data).show();

出于某种原因，就数据而言，它没有从jsfiddle获得任何东西。所以，我只是在那里添加一些文字。 http://jsfiddle.net/G9Sa3/

fadeIn或show对由ajax加载/添加的元素不起作用

3 个答案: