[英]jQuery slideDown effect not working
I have a table with countries data. 我有一张包含国家/地区数据的表格。 For each row there is an edit button, when clicked, the row disappears and a form wrapped in a div is to appear with a slide down effect.
对于每一行,都有一个编辑按钮,单击该行时,该行会消失,并且将出现一个包裹在div中的带有下滑效果的表格。 I am trying to apply
slideDown()
in this div. 我正在尝试在此div中应用
slideDown()
。 However, it is not working. 但是,它不起作用。
Here's an adapted fiddle . 这是一个经过改编的小提琴 。
My script: 我的剧本:
$(document).on('click', '.glyphicon-pencil', function(event) {
var row = $(this).closest('tr');
var id = row.find("input[name='edit-id']").val();
$.get('/country/' + id + '/edit', function(data) {
row.html(data['html']).find('div').slideDown('400');
});
});
data['html']
contains the rendered form, .glyphicon-pencil
is the edit button in each row. data['html']
包含呈现的表单, .glyphicon-pencil
是每一行中的编辑按钮。
HTML sample before pressing the edit button: 按下编辑按钮之前的HTML示例:
<table class="table table-striped table-responsive">
<thead>
<tr>
<th>Nombre</th>
<th>Continente</th>
<th>Capital</th>
<th>Lengua</th>
<th>Habitantes</th>
<th>Moneda</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>asdfasdfsdfsf</td>
<td></td>
<td></td>
<td></td>
<td>0</td>
<td></td>
<td>
<form method="POST" action="http://localhost:8000/country/all" accept-charset="UTF-8" class="pull-right"><input name="_token" value="uc1Sozi7LBtDGAxjCVQz1lDjv0bh963U1erlqMAv" type="hidden">
<span class="glyphicon glyphicon-pencil btn btn-xs btn-success"></span>
<input name="edit-id" value="1" type="hidden">
</form>
</td>
<td>
<form method="POST" action="http://localhost:8000/country/all" accept-charset="UTF-8" class="pull-right"><input name="_token" value="uc1Sozi7LBtDGAxjCVQz1lDjv0bh963U1erlqMAv" type="hidden">
<span class="glyphicon glyphicon-remove btn btn-xs btn-danger"></span>
<input name="id" value="1" type="hidden">
</form>
</td>
</tr>
</tbody>
</table>
HTML sample after the edit button is pressed: 按下编辑按钮后的HTML示例:
<table class="table table-striped table-responsive">
<thead>
<tr>
<th>Nombre</th>
<th>Continente</th>
<th>Capital</th>
<th>Lengua</th>
<th>Habitantes</th>
<th>Moneda</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr><td colspan="0">
<div style="" class="row">
<div style="" class="form-group col-md-12">
<div style="" class="col-md-2">
<label for="name" class="control-label">Nombre</label>
</div>
<div style="" class="col-md-10">
<input class="form-control" autocomplete="off" placeholder="Nombre del país" id="update-name" name="name" value="asdfasdfsdfsf" type="text">
</div>
</div>
<div style="" class="form-group col-md-12">
<div style="" class="col-md-2">
<label for="continent" class="control-label">Continente</label>
</div>
<div style="" class="col-md-10">
<input class="form-control" autocomplete="off" placeholder="Continente donde se encuentra" id="update-continent" name="continent" value="" type="text">
</div>
</div>
<div style="" class="form-group col-md-12">
<div style="" class="col-md-2">
<label for="capital" class="control-label">Capital</label>
</div>
<div style="" class="col-md-10">
<input class="form-control" autocomplete="off" placeholder="Ciudad capital" id="update-capital" name="capital" value="" type="text">
</div>
</div>
<div style="" class="form-group col-md-12">
<div style="" class="col-md-2">
<label for="language" class="control-label">Lengua</label>
</div>
<div style="" class="col-md-10">
<input class="form-control" autocomplete="off" placeholder="Lengua oficial" id="update-language" name="language" value="" type="text">
</div>
</div>
<div style="" class="form-group col-md-12">
<div style="" class="col-md-2">
<label for="population" class="control-label">Habitantes</label>
</div>
<div style="" class="col-md-10">
<input class="form-control" autocomplete="off" placeholder="Número total de habitantes" id="update-population" name="population" value="0" type="text">
</div>
</div>
<div style="" class="form-group col-md-12">
<div style="" class="col-md-2">
<label for="currency" class="control-label">Moneda</label>
</div>
<div style="" class="col-md-10">
<input class="form-control" autocomplete="off" placeholder="Moneda que se usa" id="update-currency" name="currency" value="" type="text">
</div>
</div>
<div style="" class="form-group col-md-12">
<span class="glyphicon glyphicon-floppy-disk btn btn-success"></span>
<span class="glyphicon glyphicon-ban-circle btn btn-primary"></span>
<input name="update-id" value="1" type="hidden">
</div>
</div>
</td></tr>
</tbody>
</table>
slideDown()
is used to display a selected element and will not apply effect on elements that are already displayed. slideDown()
用于显示选定的元素,并且不会对已经显示的元素生效。 You need to hide those desired elements before using slideDown()
: 您需要在使用
slideDown()
之前隐藏那些所需的元素:
$(document).on('click', '.glyphicon-pencil', function(event) {
var row = $(this).closest('tr');
var id = row.find("input[name='edit-id']").val();
$.get('/country/' + id + '/edit', function(data) {
row.html(data['html']).find('div.row').hide().slideDown('400');
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.