Question

我想要实现的是在单击行时div应该在行的下方向下滑动。当数据通过AJAX生成时，我第一次工作。但是当我第一次生成数据后它不起作用，虽然事件被触发但$('.test').slideUp(0) $(this).append(($('.test')).slideDown('slow'));在第一次之后不起作用。也不会弹出任何错误。

我希望div应该在点击的行下方向下滑动。它确实有效，但仅限于我第一次通过Ajax生成数据时。在第一次生成表格后，div不会向下滑动。

例如： - 当我点击li项目时，会出现一个表格。单击任何行后，将显示一个div You slide down a row with content xyz。但是当我再次从列表中单击某个项目，然后从相应的表中单击该行时，div就不显示了。

请参阅http://jsfiddle.net/fVz6D/5/

Answer 1

当您执行$(this).append(($('.test'))时，您将其从DOM中删除并附加到被点击的tr。但是，当您点击li时，您正在将新内容加载到表中，因此$('.test')现在不再可用。

要解决此问题，一个简单的方法是在点击.test时将li div附加回body元素：

$('body').append($('.test').slideUp(0));

小提琴：http://jsfiddle.net/fVz6D/9/

Answer 2

看起来像

  <div class="test">You slide down a row with content xyz</div>

在ajax请求之后，

从dom中消失。

你可以尝试

 $('#list').on('click', 'li', function(){
    $("body").append("<div class='test'>You slide down a row with content xyz</div>");

并从html中删除div

Answer 3

您可以使用行的outer-height明确地放置div。

Answer 4

   $(this).append(($('.test')).toggle('slow'));

使用此

updated fiddle

Answer 5

我希望以下脚本能为您效劳。

$(document).ready(function(){
    $('YOUR_ROW_ID/ELEMENT_NAME').click(function(){
          $('.test').append().html("<div>Your Content over here....</div>").toggle('slow');
    });
});

Answer 6

当您从ajax调用中加载新内容时，您很可能会替换整个表。这将松散与您拥有的事件的任何绑定关联。

解决方案是将click事件绑定到较低级别的不变元素，并允许它冒泡到所需的选择器。

$('body').on('click', 'table#table_contents tr', function(event) {
     // Your click event code here
});

这将允许您替换表而不将任何附加事件解除绑定到删除的DOM元素。

评论中的其他内容 真正的问题是选择要向下滑动的行。当加载新表时，这会发生变化，需要有一种方法来选择该内容。

您在评论中提到此行的ID等于单击以打开表格的<li>。您不应该在页面上有两个具有相同ID的dom元素。相反，我已经将幻灯片格式化为：

<div class="test" data-id="1">You slide down a row with content xyz</div>

JS还包含文档就绪函数clickedId的本地范围变量，其中包含最后一次单击的<li>的id。

var clickedId;

$('#list').on('click', 'li', function(){
    clickedId = parseInt(this.id, 10);

    var cols = [[0,4],[5,9],[10,15],[15,19],[25,29]],
        table_content = getContent(cols[clickedId - 1]);

    $("#table_content").html(table_content);
});

现在在表事件处理程序中，我们使用clickedId变量来查找要显示的行的data-id属性。

$('body').on('click', 'table#table_content tr', function () {
    var row = $('[data-id="' + clickedId + '"]');

    row.slideUp(0);
    $(this).append(row);
    row.slideDown(200);
});

为方便起见，我还将长if else代码序列转换为函数

function getContent(iCols)
{
    var table_content = '';

    for( var i = 0; i <4;i++){
        table_content += "<tr>";
        for(var j = iCols[0];j<iCols[1];j++) {
            table_content +="<td>"+j+"</td>"
        }
        table_content += "</tr>";
    }

    return table_content;
}

Updated JS Fiddle example for you

单击表格中的一行时向下滑动一个div

6 个答案: