jQuery ближайший выбор TR
Надеюсь, что кто-то может посоветовать. Возникли проблемы при попытке удалить Строка после щелчка по ссылке.
HTML
<table>
<tr><td>Some Data</td><td><a href="#" class="remove-row>Remove Row</a></td></tr>
<tr><td>Some Data</td><td><a href="#" class="remove-row">Remove Row</a></td></tr>
</table>
Теперь JS
$("a.remove-row").live('click', function(eve){
eve.preventDefault();
$.ajax({
type: 'GET',
url: '/someaction/',
dataType: 'json',
success: function(msg){
if(msg.error){
alert(msg.error);
}else{
$(this).closest('tr').remove();
alert(msg.success);
}
}
})
});
Это должно быть очень просто, но не удаляет строку. Просто для ударов, если я изменю ее на что-то вроде
$('.remove-row').addClass('foo');
. Это добавит foo ко всем строкам таблицы. Поэтому можно понять, почему не удаляется ближайшая строка.
Есть идеи?
Спасибо заранее.
4 ответа
Проблема в том, что this в настоящее время относится к объекту ajax в вашем обратном вызове success , но это легко исправить, используйте content следующим образом:
$("a.remove-row").live('click', function(eve){
eve.preventDefault();
$.ajax({
context: this, //add this here!
type: 'GET',
url: '/someaction/',
dataType: 'json',
success: function(msg){
if(msg.error){
alert(msg.error);
}else{
$(this).closest('tr').remove();
alert(msg.success);
}
}
})
});
Параметр context указывает, что этот будет в функциях обратного вызова $. Ajax () , поскольку вы хотите, чтобы он быть .remove-row , на которой вы щелкнули, используйте это в качестве опции.
Ответ Ника должен работать, но вы можете сделать и это, я не знаю, какой из них лучше, возможно, ответ Ника, но это может помочь в любом случае...
$("a.remove-row").live('click', function(eve){
var row = this;
eve.preventDefault();
$.ajax({
type: 'GET',
url: '/someaction/',
dataType: 'json',
success: function(msg){
if(msg.error){
alert(msg.error);
}else{
$(row).closest('tr').remove();
alert(msg.success);
}
}
})
});
У вас есть незакрытый атрибут class = "remove-row в первой строке.
Не проще ли удалить/скрыть заранее?
вот так :
$("a.remove-row").live('click', function(eve){
$(this).hide();
<The rest of your code logic>
......