あなたはcontext
引数を経由してそのコールバックの内側にあるべきかthis
のjQueryを伝えることができます:
$('#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!');
}
});
});
私の問題は、私は1つのボックスをチェックした後、手動でページをリロードする必要があるということです別の項目のチェックボックスをクリックすると、jsは呼び出されないようです。それは成功でもエラーでもありません。 devのログには何もありません。
あなたのコード内のIDを使用しているので、あなたは今まで(のID must be unique on the pageので)1つのチェックボックスをフックしています。私の推測では、ステータスを更新すると、1つのチェックボックスが別のアイテムを表すページを更新するときです。
IDセレクタを使用する代わりに、関連するチェックボックスのすべてに一致するクラスセレクタまたは構造セレクタを使用してください。チェックボックスでhref
を使用しているため、マークアップ以外のコードは変更されず、最初のセレクタも変更されていないようです。あなたがチェックボックスにクラスを使用したいのであれば
:
$('.someclass').click(function() { ...
それとも彼らは、コンテナ内のすべてのなら、あなたが構造を使用することができます(この場合は、子孫)セレクタ:
$('#the_container input:checkbox').click(function() { ...
更新:ここでは完全な作業例(ライブコピー)です:
HTML:
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);
}
});
オフ - :
<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を使用して返信トピック:チェックボックスにhref
属性を使用しているようです。無効なHTMLです。href
はinput[type=checkbox]
の有効な属性ではありません。それをdata-href
に変更すると、valid as of HTML5となります。
"うまくいかない"と説明できますか? –
*「私の問題は、1つのボックスをチェックした後に手動でページをリロードする必要があることです。それ以外の場合は動作しません」*動作しない***どのように***? –
申し訳ありませんが、私の質問を更新しましたJx –