开发者

Using jQuery in loaded div

开发者 https://www.devze.com 2023-02-10 02:30 出处:网络
Im trying to use some jQuery on a page that is loaded into a div using .load(). The php that gets loaded into the div, contains a div with a hidden section that is hidden when first shown. When a link

Im trying to use some jQuery on a page that is loaded into a div using .load(). The php that gets loaded into the div, contains a div with a hidden section that is hidden when first shown. When a link is pressed the hidden div section slides out. This works fine but 开发者_如何学JAVAfor some reason the div slides back up as soon as its finishes sliding down and I cant figure out why.


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

Any ideas on this?


Maybe you could try avoiding the live call:

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

});


Here is the solution:


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

精彩评论

暂无评论...
验证码 换一张
取 消