.slideDown（jQuery）不工作

Question

這是我的jQuery代碼，用於添加div中的帖子生成的html。 slidedown（）函數似乎並不正確。這裏是我的腳本：

$(".expand").click(function(){ 
     var button = $(this); 
     var id = $(this).attr("eid"); 
     var url = "/get-complete/" + id + '/'; 
     $.ajax({ 
     type: "GET", 
     url: url, 
     success: function(data) { 
      var obj = $.parseJSON(data); 
      var lang = ''; 
      $.each(obj, function() { 
      lang += this['html'] + "<br/>"; 
      }); 
      button.siblings('.comment-expand').slideDown('slow', function(){ 
      button.siblings('.comment-expand').html(lang); 
      }); 
      button.attr('class', 'collapse'); 
      button.html('Collapse'); 
     }, 
     }); 
     return false; 
    }); 

下面是HTML：

<a class="expand" href="/#" eid="{{ event.id }}">Expand</a> 

<div class="comment-expand"></div> 

這是由GET請求返回的樣本數據：

[{"html": "\n <div class=\"comment-count-bar\">\n</div>\n "}] 

這是崩潰後的代碼，但是這也不起作用：

$("body").delegate(".collapse", "click", function(){ 
      var button = $(this); 
      button.siblings('.comment-expand').slideUp('slow'); 
      button.attr('class', 'expand'); 
      button.html('Expand'); 
      return false; 
     }); 

Answer 1

試試這個：

$.ajax({ 
    type: "GET", 
    url: url, 
    // setting the dataType to json, jQuery itself parses the response 
    dataType: 'json', 
    success: function(data) { 
     // Hiding the element and setting it's innerHTML 
     // before calling slideDown() 
     button.siblings('.comment-expand').hide().html(function() { 
     // Mapping the response and concatenating `html` properties 
     // If the response has only one array use: 
     // return data[0].html + '<br>'; instead 
     return $.map(data, function(v) { 
      return v.html + '<br>'; 
     }).join(''); 
     }).slideDown(); 
     button.addClass('collapse') 
      .removeClass('expand') 
      .html('Collapse'); 
    }, 
}); 

編輯：既然你要添加的動態類，你應該委託事件：

$(document).on('click', '.collapse', function() { 
    // var button = $(this); 
    // ... 
});