ajax - アンカータグのhrefで宣言された関数内で$(this)を取得する方法

Question

テーブルの td に次のアンカー タグがあります。

<a  href="javascript:editAccount()" class="edit">edit</a>

次のようにして、editAccount() 関数内でこの td の親を見つけたいと思います。

function editAccount(){ console.log($(this).parent().parent()); }

ただし、コンソールでnullを取得し続けます

Answer 1

問題の要素を渡す必要があります

<a  onclick="editAccount(this)" class="edit">edit</a>

と

function editAccount(elem){ console.log($(elem).parent().parent()); }

またはfunction.callを使用します。

<a  onclick="editAccount.call(this)" class="edit">edit</a>

と

function editAccount(){ console.log($(this).parent().parent()); }

Jquery を使用してイベントをバインドします。

<a class="edit" href="#">edit</a>

と

$(function(){
    $('.edit').click(function(e){
       e.preventDefault();
       console.log($(this).parent().parent());
    });
});

フィドル

Answer 2

thisその関数では何も参照しません。

実際のイベントをアンカーに追加するだけです:

$('.edit').on('click', function(){
   console.log($(this).parent().parent());
   return false;
});

Answer 3

を使用する代わりに、jQuery 経由で標準のイベント登録を使用してhref="javascript:editAccount()バインドします。editAccount

$(".edit").on("click", editAccount);

個別に定義する代わりに、無名関数を使用することもできますeditAccount。

リンクが動的に追加される場合は、.editイベント委任を使用できます。

$(document).on("click", ".edit", function (e) {
    //prevent following the link if you want
    e.preventDefault();

    console.log($(this).closest("td"));
});