ロードされたdivでjQueryを使用する

Question

.load（）を使用してdivにロードされたページで、いくつかのjQueryを使用しようとしています。 divにロードされるphpには、最初に表示されたときに非表示になっている非表示のセクションを含む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; 
      }); 
}); 

これに関するアイデアはありますか？

Answer 1

はたぶん、あなたはライブコール回避を試みることができる：

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

を}）;ここで

Answer 2

はソリューションです：Ajaxをロードされたコンテンツで

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

      });