Изначально я хотел использовать $ (this) вместо $ ('# complete_task_1'), но я не мог заставить это работать.
Эта проблема проста, потому что this определяется тем, как вызывается функция, а не тем, где она определена. Поскольку jQuery вызывает вашу success функцию, jQuery устанавливает this.
Вы можете указать jQuery, что this должно быть внутри этого обратного вызова, с помощью аргумента context:
$('#complete_task_1').click(function() {
$.ajax({
url: $(this).attr('href'),
type: 'get',
dataType: 'html',
context: this,
success: function(data, textStatus, jqXHR) {
$(this).closest('tr').fadeOut();
},
error: function(data, status, error){
alert('Oooops!');
}
});
});
... или, так как вы уже звоните $(this) один раз, и я не хочу видеть ненужное дублирование, вы можете использовать область, которую вы уже закрываете:
$('#complete_task_1').click(function() {
var $this = $(this);
$.ajax({
url: $this.attr('href'),
type: 'get',
dataType: 'html',
success: function(data, textStatus, jqXHR) {
$this.closest('tr').fadeOut();
},
error: function(data, status, error){
alert('Oooops!');
}
});
});
Моя проблема в том, что мне нужно перезагрузить страницу вручную после установки одного флажка - в противном случае, когда я нажимаю флажок другого элемента, js, кажется, не вызывается. Это ни успех, ни ошибка. В журнале разработчиков ничего нет.
Вы используете идентификатор в своем коде, поэтому вы устанавливаете только один флажок (поскольку идентификаторы должны быть уникальными на странице ). Я предполагаю, что после обновления статуса, когда вы обновляете страницу, один флажок теперь представляет другой элемент.
Вместо использования селектора идентификаторов, используйте селектор класса или структурный селектор, соответствующий всем ваших соответствующих флажков. Похоже, вы используете href на флажке, чтобы различать их, поэтому ни один из кодов не изменится, кроме разметки и начального селектора.
Итак, если вы хотите использовать класс на флажках:
$('.someclass').click(function() { ...
Или, если они все в контейнере, вы можете использовать структурный (в данном случае потомок) селектор:
$('#the_container input:checkbox').click(function() { ...
Обновление : Вот полный рабочий пример (живая копия):
HTML:
<table id="container">
<tbody>
<tr>
<td>
<label>
<input type="checkbox" data-href="http://jsbin.com/amiruf/1">
One
</label>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" data-href="http://jsbin.com/amiruf/2">
Two
</label>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" data-href="http://jsbin.com/amiruf/3">
Three
</label>
</td>
</tr>
</tbody>
</table>
Эти URL просто отвечают
Response 1
... или 2 или 3.
JavaScript:
jQuery(function($) {
$("#container input:checkbox").click(function() {
var $this = $(this);
$.ajax({
url: $this.attr("data-href"),
dataType: "text",
success: function(data) {
$this.closest("tr").fadeOut();
display(data);
},
error: function() {
display("Error");
}
});
});
function display(msg) {
$("<p>").html(msg).appendTo(document.body);
}
});
Не по теме : похоже, вы используете атрибут href для своих флажков. Это недопустимый HTML, href не является допустимым атрибутом для input[type=checkbox]. Возможно, вы захотите изменить его на data-href, что сделает его действительным с HTML5 .