Wie kann eine Funktion ein Elternelement des Ankers finden, der ursprünglich die Funktion aufgerufen hat?

Question

Ok, die Frage allein macht meinen Kopf zum Drehen.

Ich habe ein Anker-Tag, das eine Funktion aufruft:

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

Gerade als Referenz, ist dies die Funktion, die aufgerufen wird ist:

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) 
}; 

Ich möchte diese Funktion ermöglichen, Arbeiten Sie an mehreren Formularen auf einer einzelnen Seite. Mein Gedanke war also, zurück in den Baum zu dem übergeordneten Formularelement zu reisen, seine ID zu erhalten und diese (irgendwie) zu verwenden, damit die Funktion auf mehreren Formularen auf der Seite arbeiten kann.

Sie können sehen, ich versuchte mit einem schnellen console.log meine Idee zu testen, aber es kam immer wieder "Undefined". Ich habe auch versucht, die console.log im Anker-Tag selbst auszuführen, aber es war auch "Undefined".

Ich getestet .parents() und es funktioniert perfekt im Anker-Tag, aber nicht in der Funktion iteslf.

Irgendwelche Vorschläge?

Answer 1

Sie sollten $ (this) in hinzufügen Eltern übergeben und dann werden Sie den richtigen Umfang haben mit in Ihrer Funktion zu arbeiten. Also:

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

und dann in der Funktion Gebrauch:

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

Answer 2

Verwenden Sie nicht das onclick-Attribut Verwenden Sie die jQuery-Ereignisbindung. Wie Sie keine Informationen über die Markup vorsah müssen Sie in den Wähler selbst

//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

Verwenden Eltern() mit einem Wähler füllen (das nach oben durch alle Eltern, bis das Spiel suchen i gefunden). z.B.

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

Answer 4

Der this Kontext ist anders. Ändern Sie den Onclick dazu:

addPerson.call(this); 

Das wird die this in der Funktion Spiel bilden mit dem this im Anker-Tag.

Oder noch besser, nicht über ein Onclick-Attribut überhaupt, aber einen jQuery Event-Handler Anhang verwenden, wie folgt aus:

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

Und Ihr Anker-Tag würde keine Click-Handler auf sie:

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

Answer 5

Übergeben Sie die ID als Parameter.

zB

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

then... 

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