Использование jQuery в загруженном div - PullRequest
Новая
       35

Использование jQuery в загруженном div

0 голосов
/ 09 февраля 2011

Я пытаюсь использовать jQuery на странице, которая загружается в div с помощью .load (). PHP, который загружается в div, содержит div со скрытым разделом, который скрыт при первом показе. При нажатии на ссылку скрытый раздел div выдвигается. Это работает нормально, но по какой-то причине div скользит вверх, как только он заканчивается, и я не могу понять, почему. 


$(function() {
   //Load addfood.php into the div user-main
   //this works and the div is hidden when addfood.php is loaded into the page
   $("a[name=search]").click(function() {
    $(".user-main").load("addfood.php", function(){$("#addfood .addfood-body").hide();});
            // Here is where a link is clicked inside the newly loaded div to slidedown the hidden div
            // the div slides down but comes back up right after
            $('a[name=openaddfood]').live('click', function() 
            {
                if ($("#addfood .addfood-body").is(":hidden")) 
                {
                    $('img[name=openaddfood]').addClass('rotate');
                    $('#addfood .addfood-body').slideDown('fast');
                }
                else
                {
                    $('img[name=openaddfood]').removeClass('rotate');
                    $('#addfood .addfood-body').slideUp('fast');
                }
                return false;
            });
});

Есть идеи по этому поводу?

Ответы [ 2 ]

0 голосов
/ 10 февраля 2011

Вот решение: 


            $("a[name=search]").click(function()
            //$('a[name=search]').live('click', function() 
            {
                $("div.nav a[name=search]").css({"background-color":"#666966","color":"#fff"});
                $(".user-main").load("addfood.php", function()
                {
                    $("#addfood .addfood-body").hide();
                });

                //$("a[name=openaddfood]").click(function()
                $('a[name=openaddfood]').live('click', function()
                {
                    if ($("#addfood .addfood-body").is(":hidden")) 
                    {
                        $('img[name=openaddfood]').addClass('rotate');
                        $('#addfood .addfood-body').slideDown('fast');
                    }
                    else
                    {
                        $('img[name=openaddfood]').removeClass('rotate');
                        $('#addfood .addfood-body').slideUp('fast');
                    }
                    return false;
                });

                $("#addfood .addfood-body-nutri").hide();
                $("a[name=openmorenutri]").click(function()
                {
                    if ($("#addfood .addfood-body-nutri").is(":hidden")) 
                    {
                        $('img[name=openmorenutri]').removeClass('rotate');
                        $('#addfood .addfood-body-nutri').slideDown('fast');
                    }
                    else
                    {
                        $('img[name=openmorenutri]').removeClass('rotate');
                        $('#addfood .addfood-body-nutri').slideUp('fast');
                    }
                    return false;
                });

            });
0 голосов
/ 10 февраля 2011

Возможно, вы могли бы попытаться избежать живого вызова: 

$(function() {

 //Load addfood.php into the div user-main
 //this works and the div is hidden when addfood.php is loaded into the page
 $("a[name=search]").click(function() {

 $(".user-main").load("addfood.php", function()
 {
        $("#addfood .addfood-body").hide();
        // Here is where a link is clicked inside the newly loaded div to slidedown the hidden div
        // the div slides down but comes back up right after
        $('a[name=openaddfood]').click(function() 
        {
            if ($("#addfood .addfood-body").is(":hidden")) 
            {
                $('img[name=openaddfood]').addClass('rotate');
                $('#addfood .addfood-body').slideDown('fast');
            }
            else
            {
                $('img[name=openaddfood]').removeClass('rotate');
                $('#addfood .addfood-body').slideUp('fast');
            }
            //return false;//add href="javascript:void(0);" to your a tag to negate this
            //this might also cause a problem - worth checking
        });
  });

});

...