関数は、最初に関数を呼び出したアンカーの親要素をどのように見つけることができますか？

Question

質問だけで、私の頭が回転しています。

私は関数を呼び出しているアンカータグを持っている：

<a href="#" id="addPerson" onClick="addPerson(); return false;">Add a Guest</a> 

ただ、参考のために、これが呼び出されています関数です：

function addPerson() { 
//current keeps track of how many rows we have. 
current++; 
console.log($(this).parent('form').attr('id')); 
var strToAdd = '<div class="row">\ 
      <div class="column grid_2">\ 
      <label for="two-guests-name'+current+'">Guest '+current+':</label>\ 
      </div>\ 
      <div class="column grid_5">\ 
      <input name="two-guests-name'+current+'" type="text" id="two-guests-name'+current+'" value="Name" onfocus="RemoveFormatString(this, \'Name\')" /> \ 
      <input name="two-guests-age'+current+'" type="text" class="guestage digits" id="two-guests-age'+current+'" value="Age" size="4" maxlength="3" onfocus="RemoveFormatString(this, \'Age\')" />\ 
      </div>\ 
     </div>' 

$('#numberguests').append(strToAdd) 
}; 

私は、この関数がすることができますしたいのですが1つのページで複数のフォームを処理するだから私の考えは、親フォーム要素にツリー内を戻り、そのIDを取得し、その機能をページ内の複数のフォームで機能させるために使用していました。

あなたは私のアイデアをテストするためにquick console.logを使ってみましたが、 "未定義"に戻ってきました。私はアンカータグ自体でconsole.logを実行しようとしましたが、それも "Undefined"でした。

私は、.parents（）をテストしましたが、アンカータグでは完全に動作しますが、関数iteslfでは動作しません。

提案がありますか？

Answer 1

あなたは追加の両親に$（this）を渡す必要があり、その後、あなたはあなたの関数で作業するための適切な範囲を持っています。だから、：

<a href="#" id="addPerson" onClick="addPerson($(this)); return false;">Add a Guest</a> 

、その後、機能の使用中：リターン偽として

function addPerson(anchorElement) { 
    var form = anchorElement.parents("form"); 
    //etc. 
} 

Answer 2

onclick属性のjQueryイベントバインディングを使用しないでください。あなたはマークアップについての情報を提供しなかったとして、あなたは（これは私が見つけた試合まで、すべての親を通って上方に検索します）セレクタとセレクタ自分

//this binds the same function to all a tags specified by the selector 
$("form somemoreselectorgotgettheright a").bind("click", function() { 
    console.log($(this).parent("form").attr("id")); 
    .... 
}); 

Answer 3

使用両親（）に記入する必要があります。例えば

$(this).parents('form').[...] 

Answer 4

thisの文脈が異なります。

addPerson.call(this); 

アンカータグにthisと機能のマッチアップでthisを行います。これまでのonclickを変更します。

が

$(document).ready(function() { 
    $('#addPerson').click(function(ev) { 
     ev.preventDefault(); 
     // Do something with $(this), which is the anchor tag 
    }); 
}); 

そして、あなたのアンカータグがそれに任意のクリックハンドラを持っていない：

いっそは、全くonclick属性を使用していますが、このように、jQueryのイベントハンドラの添付ファイルを使用していない

を

<a href="#" id="addPerson">Add a Guest</a> 

Answer 5

idをパラメータとして渡します。例えば

<a href="#" id="addPerson" onClick="addPerson('addPerson'); return false;">Add a Guest</a> 

then... 

function addPerson(parent_id) { 
// do something with parent_id